如何使用 JavaScript 滚动到页面顶部？滚动条立即跳到页面顶部也是可取的，因为我不希望实现平滑滚动。
如果您不需要更改动画，那么您不需要使用任何特殊插件 - 我只需使用原生 JavaScript window.scrollTo() 方法 - 传入 0, 0 将立即将页面滚动到左上角.
window.scrollTo(xCoord, yCoord);
参数
xCoord 是沿水平轴的像素。
yCoord 是沿垂直轴的像素。
如果您确实想要平滑滚动，请尝试以下操作：
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
这将采用 href="#top" 的任何 <a> 标记并使其平滑滚动到顶部。
window.pageYOffset 将是窗口 e̶l̶e̶m̶e̶n̶t̶ 对象的属性。
平滑动画的更好解决方案：
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });
参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
ScrollOptions 的支持（对于某些浏览器）：github.com/iamdustan/smoothscroll
试试这个在顶部滚动
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>
您不需要 jQuery 来执行此操作。一个标准的 HTML 标签就足够了……
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>
getElementById 调用另一个按钮，这将不起作用。
所有这些建议都适用于各种情况。对于那些通过搜索找到此页面的人，也可以尝试一下this。 JQuery，没有插件，滚动到元素。
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
平滑滚动，纯javascript：
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
<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' });
animate 函数中使用字符串作为持续时间，而应使用：$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
真的很奇怪：这个问题已经存在五年了，仍然没有原生的 JavaScript 答案来为滚动设置动画……所以你去吧：
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
如果您愿意，可以将其包装在一个函数中并通过 onclick 属性调用它。检查此jsfiddle
注意：这是一个非常基本的解决方案，可能不是最高效的解决方案。可以在此处找到一个非常详细的示例：https://github.com/cferdinandi/smooth-scroll
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
在 HTML 中
<a href="#top">go top</a>
如果你想做平滑滚动，请试试这个：
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
另一个解决方案是 JavaScript window.scrollTo 方法：
window.scrollTo(x-value, y-value);
参数 ：
值是沿水平轴的像素。
y 值是沿垂直轴的像素。
使用 window.scrollTo(0, 0); 非常快
所以我尝试了 Mark Ursino 示例，但在 Chrome 中没有任何反应
我发现了这个
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});
测试了所有 3 个浏览器并且它工作我正在使用蓝图 css 这是当客户单击“立即预订”按钮并且没有选择租赁期时，慢慢移动到日历所在的顶部并打开一个对话框 div 指向2个字段，3秒后消失
lot of users 建议同时选择 html 和 body 标签以实现跨浏览器兼容性，如下所示：
$('html, body').animate({ scrollTop: 0 }, callback);
如果你指望你的回调只运行一次，这可能会让你绊倒。它实际上会运行两次，因为您选择了两个元素。
如果这对您来说是个问题，您可以执行以下操作：
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}
这样做的原因是在 Chrome $('html').scrollTop() 中返回 0，但在 Firefox 等其他浏览器中则不然。
如果您不想在滚动条已经位于顶部的情况下等待动画完成，请尝试以下操作：
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
旧的 #top 可以解决问题
document.location.href = "#top";
在 FF、IE 和 Chrome 中运行良好
$(".scrolltop").click(function() { $("html, body").animate({ scrollTop: 0 }, "slow"); return false; }); .section{ 高度：400px; } .section1{ 背景颜色：#333; } .section2{ 背景颜色：红色； } .section3{ 背景颜色：黄色； } .section4{ 背景颜色：绿色； } .scrolltop{ 位置：固定；右：10px；底部：10px；颜色：#fff; }
window.scrollTo(0, document.body.scrollHeight);