JQuery scrollTop（）函数不滚动
[英]JQuery scrollTop() function not scrolling
问题描述
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: 我查看了如何使用JQuery的scrollTop（）函数执行此操作，并使用堆栈溢出中的资源，我想出了这个：
HTML: 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: JavaScript的：
$(".clickContact").click(function() {
$('html, body').animate({ scrollTop: $('#Contact').offset().top }, 1000);
});
CSS: 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. 每当我点击导航菜单上的“联系人”时，它都不会滚动#Contact div。 I am new to HTML/CSS/Javascript, any help would be appreciated. 我是HTML / CSS / Javascript的新手，任何帮助将不胜感激。
Fiddle http://jsfiddle.net/9g18ecgs/ 小提琴http://jsfiddle.net/9g18ecgs/
4 个解决方案
解决方案1
1 2015-07-22 06:45:53
Your code should work fine if you just add return false to your event handler: 如果只是将return false添加到事件处理程序，那么代码应该可以正常工作：
$(".clickContact").click(function() {
$('html, body').animate({ scrollTop: $('#Contact').offset().top }, 1000);
return false;
});
JSFiddle: http://jsfiddle.net/n9n43on7/ JSFiddle： http ： //jsfiddle.net/n9n43on7/
解决方案2
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. 您需要为您单击的锚提供href属性，因为它不是页面滚动回顶部。
<a href="#Contact" class="clickContact">Contact </a>
Please refer updated fiddle http://jsfiddle.net/9g18ecgs/1/ 请参考更新的小提琴http://jsfiddle.net/9g18ecgs/1/
解决方案3
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/ http://jsfiddle.net/9g18ecgs/4/
解决方案4
0 2015-07-22 06:40:40
Instead of jquery you just simply need to use : 而不是jquery你只需要使用：
<li><a href="#contact" class="clickContact">Contact </a></li>
To goto contact div position. 转到联系div位置。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.