Javascript jQuery 动画滚动顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8497022/
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
jQuery animate scrollTop
提问by ayyp
I have quite a few sectiontags in a div with an overflow set to hidden. The code is along the lines of this:
我section在 div 中有很多标签，溢出设置为hidden. 代码是这样的：
<div id="viewport">
<section>
content
</section>
<section>
content
</section>
</div>
I have it set up like this because I want to be able to scroll through the sectionscontained within the divwhen the corresponding link is pressed in the menu. I have this function:
我将它设置成这样，因为我希望能够在菜单中按下相应链接时滚动浏览sections包含在其中div的内容。我有这个功能：
$('#mn a').click(function(){
var aHref = $(this).attr("href");
var sectionHeight = $('section'+aHref+'').height();
$('#viewport').height(sectionHeight);
});
Which I use to resize the #viewportdiv because the sectionsare different sizes. When I try to put this scroll part into that function:
我用它来调整#viewportdiv 的大小，因为sections它们的大小不同。当我尝试将此滚动部分放入该函数时：
$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);
it makes the entire page scroll. When I try to replace $('body,html')with $('section, #viewport')it scrolls inside the div, but it doesn't do so properly.
它使整个页面滚动。当我尝试$('body,html')用$('section, #viewport')它替换它时，它会在 div 内滚动，但它没有正确执行。
I have a live example of this here. I assume it has something to do with either the .offset()or what I'm passing into the .animate(), but I've tried quite a few different things but to no avail. Can someone please point me in the right direction or tell me what I've done wrong?
我在这里有一个活生生的例子。我认为它与.offset()我传递.animate()给 . 有人可以指出我正确的方向或告诉我我做错了什么吗？
采纳答案by InuYaksa
The problem is how position()works, it returns top/height related to scrollTop.
问题是如何position()工作，它返回与scrollTop.
So if you request at click $('section'+aHref+'').position().topthe position returned is modified from scrollTopvalue.
因此，如果您在单击时请求，$('section'+aHref+'').position().top则返回的位置将根据scrollTop值进行修改。
You can get all height position at ready event. (so scrollTopis 0)
您可以在就绪事件中获得所有高度位置。（scrollTop也是0）
Or you can sanitize position values with:
或者您可以使用以下方法清理位置值：
$("section#skills").position().top + $("#viewport").scrollTop()
回答by ShankarSangoli
First of all you should prevent the default behavior of the anchor in order to scroll the page to the top of the page. You can do this by calling preventDefault()method on the event object inside clickevent handler. Try this
首先，您应该阻止锚点的默认行为，以便将页面滚动到页面顶部。您可以通过preventDefault()在click事件处理程序内的事件对象上调用方法来完成此操作。尝试这个
$('#mn a').click(function(e){
e.preventDefault();
var aHref = $(this).attr("href");
var top = $('section'+aHref+'').position().top;
$('#viewport').animate({scrollTop: top}, 800);
});
回答by Ram Patra
If you want a simple jquery plugin to do this then you can try (AnimateScroll) which currently supports more than 30 easing styles too
如果您想要一个简单的 jquery 插件来执行此操作，那么您可以尝试 ( AnimateScroll)，它目前也支持 30 多种缓动样式
