当单击导航 div ID 内的任何链接或(如果可能)单击包含导航链接的 div ID 本身的任何位置时,我想将页面滚动到例如导航 div ID 的顶部。
我对此进行了研究,最接近的是jQuery - 单击时如何将锚点滚动到页面顶部?但是由于某种原因,当我在我的示例中尝试这样做时,它似乎不起作用。我究竟做错了什么?
我是 jQuery 和 html 和 css 的新手(并且使用了 div 的内联样式,因为我不想仅为示例提供单独的 css)。
当我从 jQuery 加载 html 和脚本时 - 单击时如何将锚点滚动到页面顶部?在 Aptana 中它也不会滚动。即使在 div 类上方有一个内容 div,也可以完全滚动到空间。
我在相关的 div 中包含了两个小段落来准确解释我的意思。
很感谢任何形式的帮助。谢谢你。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li><a href="#Portfolio" title="">Portfolio</a></li>
<li><a href="#Services" title="">Services</a></li>
<li><a href="#About" title="">About</a></li>
<li><a href="#Contact" title="">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
编辑 在 Firefox 中使用 scrollTop 时要注意这一点。 动画 scrollTop 在 Firefox 中不工作 jQuery scrollTop - 在 Mozilla / Firefox 中不支持负值 我花了一段时间才弄清楚我的代码很好,但 scrollTop 是 FF 中的这个问题。在同一示例中,也可以观察到该行为。当向下滚动并固定锚点时,FF 将向上滚动到目标 div 之前或之后 2-4px 的随机位置。
我现在使用 Scrolld.js 在主要浏览器中实现像素完美滚动到所需点。据我所知,我不明白不同的浏览器引擎如何从不同的(html 或正文)输入中呈现诸如 scrollTop 之类的常见事物,而且我是 jQuery 的新手。猜猜这不是 jQuery 的“错误”,而是浏览器引擎如何呈现 scrollTop。