CODEWITHSUNDEEP
javascriptjqueryhtml
Dhoni
Dhoni

Reputation: 1234

Scrolling to a div is not working

I'm trying to scroll to a particular div in my code, but it's not working. I searched a lot and found same code in other resources also. I also need to keep the navigation bar div visible even when the page scrolls down.

<!DOCTYPE html>
    <html>
    <head>
        <title>Name</title>
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            function goToByScroll(id){
              // Reove "link" from the ID
                //id = id.replace("link", "");
              // Scroll
              console.log("clicked "+id);
                $('html,body').animate({
                    scrollTop: $("#"+id).offset().top},
                    'slow');
            }

            $("#nav_bar_menu > div > a").click(function(e) { 
                  // Prevent a page reload when a link is pressed
                  console.log("Clicked "+ e);
                e.preventDefault(); 
                // Call the scroll function
                goToByScroll($(this).attr("id"));           
            });
        </script>
    </head>
    <body>
        <div class="nav">
            <div id="landing_profile"> <img src="me.jpg" class="profile_img"> </div>
            <div class="nav_bar" id="nav_bar_menu">
                <div id="home"> <a href="#" onclick="goToByScroll('home')">Home</a> </div>
                <div id="about_me"> <a href="#" onclick="goToByScroll('about_me')">About me</a> </div>
                <div id="projects"> <a href="#" onclick="goToByScroll('projects')">Projects</a> </div>
                <div id="contact"> <a href="#" onclick="goToByScroll('contact')">Contact</a> </div>
            </div>

        </div>

        <div id="main">
            <div id="home">
            <h1>Home</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds  dslajdlajd;ajsdas

            dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="about_me">
                <h1>About me</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds  dslajdlajd;ajsdas

            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="projects">
                <h1>Projects</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa

            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="contact">
            <h1>Contact</h1>
                <p>Mail me at</p>
                <a target="_top" href="mailto:[email protected]">[email protected]</a>
                <br><br>

            </div>
        </div>
    </body>
    </html>

Upvotes: 0

Views: 126

Answers (3)

Mr Lister
Mr Lister

Reputation: 46539

The problem is you have duplicate ids. For example, you're trying to scroll to the element with id="contact", and it does! Only it's the first one (the id in the menu) rather than the second one (the section you're trying to go to).

Solution: give everything unique ids.

To prevent this kind of problem from occurring, run your code through the W3C validator, which will point out errors like this.

Another problem I saw in your code is you have two routines for clicks, that interfere with each other. I commented out one.

Edit: Oh, your other remark. (That one should really have been a separate question.)
To keep the navigation bar visible even when the page is scrolled, give it position:fixed.

function goToByScroll(id) {
  // Reove "link" from the ID
  //id = id.replace("link", "");
  // Scroll
  console.log("clicked " + id);
  $('html,body').animate({
      scrollTop: $("#" + id).offset().top
    },
    'slow');
}

/*
$("#nav_bar_menu > div > a").click(function(e) {
  // Prevent a page reload when a link is pressed
  console.log("Clicked " + e);
  e.preventDefault();
  // Call the scroll function
  goToByScroll($(this).parent().attr("id"));
});
*/
.nav {position:fixed; background:white; top:0; left:0; width:7em;}
body {padding-left:7em}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
  <div id="landing_profile">
    <img src="me.jpg" class="profile_img">
  </div>
  <div class="nav_bar" id="nav_bar_menu">
    <div id="home"> <a href="#" onclick="goToByScroll('home_section')">Home</a> 
    </div>
    <div id="about_me"> <a href="#" onclick="goToByScroll('about_me_section')">About me</a> 
    </div>
    <div id="projects"> <a href="#" onclick="goToByScroll('projects_section')">Projects</a> 
    </div>
    <div id="contact"> <a href="#" onclick="goToByScroll('contact_section')">Contact</a> 
    </div>
  </div>

</div>

<div id="main">
  <div id="home_section">
    <h1>Home</h1>
    <p>dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds dslajdlajd;ajsdas dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs
      d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
  </div>
  <div id="about_me_section">
    <h1>About me</h1>
    <p>dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as
      da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
  </div>
  <div id="projects_section">
    <h1>Projects</h1>
    <p>dslajdlajd;ajsdas dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa
      dds</p>
  </div>
  <div id="contact_section">
    <h1>Contact</h1>
    <p>Mail me at</p>
    <a target="_top" href="mailto:[email protected]">[email protected]</a>
    <br>
    <br>

  </div>
</div>

Upvotes: 2

Fionna
Fionna

Reputation: 382

The easiest way is to use a tags....

#nav_bar_menu
{
    position: fixed;
    background-color: #fee;
}
        <div class="nav">
            <div id="landing_profile"> <img src="me.jpg" class="profile_img"> </div>
            <div class="nav_bar" id="nav_bar_menu">
                <div id="home"> <a href="#homelink">Home</a> </div>
                <div id="about_me"> <a href="#about">About me</a> </div>
                <div id="projects"> <a href="#projectslink">Projects</a> </div>
                <div id="contact"> <a href="#contactme">Contact</a> </div>
            </div>

        </div>

        <div id="main">
            <div id="home"><a name="homelink"></a>
            <h1>Home</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds  dslajdlajd;ajsdas

            dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="about_me"><a name="about"></a>
                <h1>About me</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds  dslajdlajd;ajsdas

            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="projects"><a name="projectslink"></a>
                <h1>Projects</h1>
                <p>dslajdlajd;ajsdas
            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa

            dsdasdadadsasdadadaaaaaaaaaaascs d as da dsa d ad ad ad adsa
            das da d.a d.a da dadnfnos iaiyd iayd iaD DIADIGDHASHL DADad
            d aids AODU OADU OUDOS DO DO DOUD OUD Aduod pa dds</p>
            </div>
            <div id="contact"><a name="contactme"></a>
            <h1>Contact</h1>
                <p>Mail me at</p>
                <a target="_top" href="mailto:[email protected]">[email protected]</a>
                <br><br>

            </div>
        </div>

Upvotes: 0

K K
K K

Reputation: 18099

You are not passing the correct id to the function. Change the code to this line:

goToByScroll($(this).parent().attr("id"));

instead of

goToByScroll($(this).attr("id"));

Demo: http://jsfiddle.net/GCu2D/872/

Upvotes: 0

Related Questions