jQuery 通过单击元素内的锚点或包含 div id 的任何位置，将元素滚动到页面顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19351563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id
提问by moderntimes
I would like to scroll the page to the top of the e.g. navigation div ID when clicking either any of the links inside the navigation div ID or (if possible) when clicking anywhere into the div ID itself containing the navigation links.
当单击导航 div ID 内的任何链接或（如果可能）单击包含导航链接的 div ID 本身的任何位置时，我想将页面滚动到导航 div ID 的顶部。
I have researched this and the closest I have come to is jQuery - How to scroll an anchor to the top of the page when clicked?however for some reason it does not seem to work when I try to do this in my example. What am I doing wrong?
我对此进行了研究，最接近的是jQuery - 单击时如何将锚点滚动到页面顶部？但是由于某种原因，当我尝试在我的示例中执行此操作时，它似乎不起作用。我究竟做错了什么？
I am new to jQuery and medium at html and css (and used inline styling of the divs since I did not want to supply a separate css just for the example).
我是 jQuery 和 html 和 css 中的新手（并且使用了 div 的内联样式，因为我不想仅为示例提供单独的 css）。
When I load the html and script from jQuery - How to scroll an anchor to the top of the page when clicked?in Aptana it also does not scroll. Even with a content div above the div class work so that there is space to scroll to at all.
当我从jQuery加载 html 和脚本时- 如何在单击时将锚点滚动到页面顶部？在 Aptana 中，它也不滚动。即使在 div 类上方有一个内容 div 也可以工作，以便有空间可以滚动。
I have included two little paragraphs inside the concerning divs to explain exactly what I mean.
我在相关的 div 中包含了两个小段落来准确解释我的意思。
Any help is very much appreciated. Thank you.
很感谢任何形式的帮助。谢谢你。
<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>
EDITBeware this when using scrollTop in Firefox. Animate scrollTop not working in firefoxjQuery scrollTop - no support for negative values in Mozilla / FirefoxTook me a while to figure out my code was fine but scrollTop was this issue in FF. In this same example the behaviour can also be observed. When scrolling down and making the anchors fixed, FF will scroll up to random positions either 2-4px before or after the target div.
编辑在 Firefox 中使用 scrollTop 时要注意这一点。 Animate scrollTop 在 Firefox 中不起作用jQuery scrollTop - 在 Mozilla / Firefox 中不支持负值我花了一段时间才弄清楚我的代码很好，但 scrollTop 是 FF 中的这个问题。在这个相同的例子中，也可以观察到这种行为。当向下滚动并固定锚点时，FF 将向上滚动到目标 div 之前或之后 2-4px 的随机位置。
I am now using Scrolld.js to achieve pixel perfect scrolling to the desired points across major browsers. I don't understand how different browser engines can render such a common thing as scrollTop from different (either html or body) inputs as far as I understand and I am new to jQuery. Guess this is not "the fault" of jQuery but how the browser engines render scrollTop.
我现在使用 Scrolld.js 在主要浏览器上实现像素完美滚动到所需点。据我所知，我不明白不同的浏览器引擎如何从不同的（html 或正文）输入呈现像 scrollTop 这样的常见事物，而且我是 jQuery 的新手。猜猜这不是 jQuery 的“错”，而是浏览器引擎如何呈现 scrollTop。
回答by lexith
I dont know if you did, but you have to include jquery to use it. Another thing would be, that your "click listener" has to be in jqueries document ready function like this:
我不知道你是否这样做了，但你必须包含 jquery 才能使用它。另一件事是，您的“单击侦听器”必须在 jquery 文档就绪函数中，如下所示：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll_navigation ul li').on('click', function(){
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>
