我现在正在处理一个网站，遇到了一个问题。我对所有这一切都很陌生，所以我确信它是一个简单的解决方案。基本上，我想使用 javascript 有一个 onlick 事件，在该事件中单击标题中的链接将导致实时动画向下滚动到页面上的某个点。问题？没有实时滚动，它只是跳跃。这是代码片段。谢谢!
<head style="overflow-x: hidden">
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="waypoints.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});
});
</script>
<script>
$(".nav-item").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 600);
});
</script>
</head>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#what'>what</a></li>
<li class = 'nav-item'><a href='#how'>how</a></li>
<li class = 'nav-item'><a href='#why'>why</a></li>
<li class = 'nav-item'><a href='#where'>where</a></li>
<li class = 'nav-item'><a href='#who'>who</a></li>
</ul>
</div>
跳点示例:
<div class = 'mark' id = 'how'></div>
对 js 的另一种尝试不起作用
$("a.nav-item").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
});
return false;
});
最佳答案
它没有成功，因为你尝试了我来自 This Question 的答案但你有不同的设置。 所以这会起作用:
$("li.nav-item").click(function() {
$("html, body").animate({
scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
});
return false;
});
重点是您要查找的#tag 元素位于LI 元素内的A 元素内。 Ypu 可以看到 Fiddle here
已编辑
您的文档中有不少错误，这就是无法正常工作的原因。遇到问题时打开 FF 或 Chrome 开发工具(控制台...)，以便您可以查看问题所在。代码“航点”中存在错误，无法加载。我暂时评论了它。以下工作就像一个魅力:
<html>
<head style="overflow-x: hidden">
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
/*Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});*/
$("li.nav-item").click(function() {
alert("ok");
$("html, body").animate({
scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
});
return false;
});
});
</script>
<style type="text/css">
.long_div{
background-color: lightblue;
min-height: 600px;
border: thin solid blue;
}
</style>
</head>
<body>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#what'>what</a></li>
<li class = 'nav-item'><a href='#how'>how</a></li>
<li class = 'nav-item'><a href='#why'>why</a></li>
<li class = 'nav-item'><a href='#where'>where</a></li>
<li class = 'nav-item'><a href='#who'>who</a></li>
</ul>
</div>
<div id="what" class="long_div">
What
</div>
<div id="how" class="long_div">
How
</div>
<div id="why" class="long_div">
Why
</div>
</body>
</html>
关于javascript - 实时滚动问题 (JS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17532854/