如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。
当前回答
如果您想设置滚动动作的动画,则不需要javascript、event!
CSS:
html {
scroll-behavior: smooth;
}
HTML格式:
<html>
<body>
<a id="top"></a>
<!-- your document -->
<a href="#top">Jump to top of page</a>
</body>
</html>
其他回答
所有这些建议都适用于各种情况。对于通过搜索找到此页面的人,也可以尝试一下。JQuery,没有插件,滚动到元素。
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
这样做不需要jQuery。一个标准的HTML标记就足够了。。。
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
你不需要JQuery。只需调用脚本
window.location = '#'
单击“转到顶部”按钮
示例演示:
输出.jsbin.com/fakumo#
PS:当你使用像angularjs这样的现代库时,不要使用这种方法。这可能会破坏URL散列。
只需使用此脚本滚动到顶部直接。
<script>
$(document).ready(function(){
$("button").click(function(){
($('body').scrollTop(0));
});
});
</script>
<script>
$(function(){
var scroll_pos=(0);
$('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>
编辑:
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
另一种上下边距滚动方式:
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });