jQuery 动画滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8047454/
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 scroll
提问by Marvzz
I'm not sure how to call the effect, but can someone point me into a library that would help me do the same effect as this website?
我不确定如何调用效果，但是有人可以将我指向一个可以帮助我实现与本网站相同效果的库吗？
Basically, it moves up the row to the top of the page on mouse click. A code snippet, preferably jQuery, can help to, if there is no such specialized effect library for it.
基本上，它会在鼠标单击时将行向上移动到页面顶部。如果没有专门的效果库，代码片段（最好是 jQuery）可以提供帮助。
Im not sure if i need to start another topic, but can anyone help me with a small jQuery snippet to achieve the whole effect of the Makr UI?
我不确定我是否需要开始另一个主题，但是谁能帮助我使用一个小的 jQuery 片段来实现 Makr UI 的整体效果？
回答by Mathieu
You can animate the scrolltop of the page with jQuery.
您可以使用 jQuery 为页面的滚动顶部设置动画。
$('html, body').animate({
scrollTop: $(".middle").offset().top
}, 2000);
See this site: http://papermashup.com/jquery-page-scrolling/
回答by Ram Patra
You can give this simple jQuery plugin (AnimateScroll) a whirl. It is quite easy to use.
您可以尝试一下这个简单的 jQuery 插件 ( AnimateScroll)。它很容易使用。
1. Scroll to the top of the page:
1. 滚动到页面顶部：
$('body').animatescroll();
2. Scroll to an element with ID section-1:
2. 滚动到带有 ID 的元素section-1：
$('#section-1').animatescroll({easing:'easeInOutBack'});
Disclaimer: I am the author of this plugin.
免责声明：我是这个插件的作者。
回答by Ng? ??c Tu?n
I just use:
我只是使用：
$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);回答by Ragnar?k
var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
$("html, body").animate({
scrollTop: $("#scroll-" + page_id).offset().top
}, 2000)
} else if (page_id == "") {
$("html, body").animate({
scrollTop: $("#scroll-" + page_id).offset().top
}, 2000)
}
});
});
回答by Eugene Tiurin
There is a jquery plugin for this. It scrolls document to a specific element, so that it would be perfectly in the middle of viewport. It also supports animation easings so that the scroll effect would look super smooth. Check out AnimatedScroll.js.
有一个 jquery 插件。它将文档滚动到特定元素，使其完美地位于视口的中间。它还支持动画缓动，使滚动效果看起来非常平滑。查看AnimatedScroll.js。
