stackoom
  简体   繁体   中英

JQuery scrollTop() function not scrolling

 原文  2015-07-22 06:36:26  3   4    javascript/ jquery/ html/ css

Question

I'm trying to scroll to an element after clicking on a link in the navigation bar. I looked up how to do this using JQuery's scrollTop() function, and using resources from stack overflow, i came up with this:

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sib Quayum</title>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<div class="nav">
    <ul>
        <li><a href="" class="clickContact">Contact </a></li>
        <li><a href="" class="clickAbout">About Me </a></li>
        <li><a href="" class="clickHome">Home </a></li>
    </ul>

</div>
<div class="headerBreak"></div>

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

<div id="About">Hi this is about me.</div>


<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br>

<div id="Contact">Contact me and stuff</div>

</body>
</html>

JavaScript: 

$(".clickContact").click(function() {
    $('html, body').animate({ scrollTop: $('#Contact').offset().top }, 1000);
});

CSS: 

*{
    font-family:Tahoma;
}

.nav{


    height:40px;
    background:maroon;
    margin-top: 20px;
}

.nav ul{
    margin:0;
    padding:0;
}

.nav ul li{
    list-style:none;
}

.nav ul li a{
    text-decoration:none;
    float:right;
    display:block;
    padding:10px 20px;
    color:orange;
}

.nav ul li a:hover{
    color:white;
}

Whenever I click on "Contact" on the navigation menu, it does not scroll the #Contact div. I am new to HTML/CSS/Javascript, any help would be appreciated.

Fiddle http://jsfiddle.net/9g18ecgs/

4 answers

solution1
 1  2015-07-22 06:45:53

Your code should work fine if you just add return false to your event handler: 

$(".clickContact").click(function() {
    $('html, body').animate({ scrollTop: $('#Contact').offset().top }, 1000);
    return false;
});

JSFiddle: http://jsfiddle.net/n9n43on7/

solution2
 1  2015-07-22 06:46:06

You need to provide href attribute to the anchor you are clicking on, because it is not there page is scrolling back to top. 

<a href="#Contact" class="clickContact">Contact </a>

Please refer updated fiddle http://jsfiddle.net/9g18ecgs/1/

solution3
 1  2015-07-22 07:09:26

The problem is that the page reloads when you click on the links. Try to replace this 

.nav ul li a{
    text-decoration:none;
    float:right;
    display:block;
    padding:10px 20px;
    color:orange;
}

By this :

.nav ul li{
    text-decoration:none;
    float:right;
    display:block;
    padding:10px 20px;
    color:orange;
    cursor: pointer;
}


And this :


<li><a href="" class="clickContact">Contact </a></li>
<li><a href="" class="clickAbout">About Me </a></li>
<li><a href="" class="clickHome">Home </a></li>


By this :


<li class="clickContact">Contact</li>
<li class="clickAbout">About Me</li>
<li class="clickHome">Home</li>

It'll work !! http://jsfiddle.net/9g18ecgs/4/

solution4
 0  2015-07-22 06:40:40

Instead of jquery you just simply need to use : 

<li><a href="#contact" class="clickContact">Contact </a></li>

To goto contact div position. Check out snippet code 

 *{ font-family:Tahoma; } .nav{ height:40px; background:maroon; margin-top: 20px; } .nav ul{ margin:0; padding:0; } .nav ul li{ list-style:none; } .nav ul li a{ text-decoration:none; float:right; display:block; padding:10px 20px; color:orange; } .nav ul li a:hover{ color:white; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sib Quayum</title> <link rel="stylesheet" type="text/css" href="main.css"/> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="script.js"></script> <div class="nav"> <ul> <li><a href="#contact" class="clickContact">Contact </a></li> <li><a href="" class="clickAbout">About Me </a></li> <li><a href="" class="clickHome">Home </a></li> </ul> </div> <div class="headerBreak"></div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="About">Hi this is about me.</div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <div id="Contact">Contact me and stuff</div> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery .scrollTop not scrolling properly jQuery - scrollTop command not scrolling jQuery scrolling issues with scrollTop JQuery ScrollTop scrolling too far scrollTop jQuery, scrolling to div with id? jQuery scrollTop not scrolling on iOS 12 Issue with ScrollTop function - Over scrolling JQuery fadeTo() Function with scrollTop() jQuery ScrollTop() function not working jQuery delay on scrollTop function
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM