如何使用JavaScript滚动到页面顶部?滚动条立即跳到页面顶部也是可取的,因为我不希望实现平滑滚动。


当前回答

纯JavaScript解决方案:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

我在Codepen上编写了一个动画解决方案

此外,您可以尝试使用CSS滚动行为的另一种解决方案:smooth属性。

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

其他回答

如果您确实想要平滑滚动,请尝试以下操作:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

这将接受href=“#top”的任何<a>标记,并使其平滑滚动到顶部。

如果你不需要更改动画,那么你就不需要使用任何特殊的插件——我只需要使用原生JavaScript window.scrollTo()方法——传入0,0将立即将页面滚动到左上角。

window.scrollTo(xCoord, yCoord);

参数

xCoord是沿水平轴的像素。yCoord是沿垂直轴的像素。

你不需要JQuery。只需调用脚本

window.location = '#'

单击“转到顶部”按钮

示例演示:

输出.jsbin.com/fakumo#

PS:当你使用像angularjs这样的现代库时,不要使用这种方法。这可能会破坏URL散列。

您可以简单地使用链接中的目标,例如#someid,其中#someid是div的id。

或者,您可以使用任何数量的滚动插件,使其更加优雅。

http://plugins.jquery.com/project/ScrollTo是一个例子。

只需尝试,不需要其他插件/框架

document.getElementById(“jarscoolbtn”).addEventListener(“单击”,jarsrollfunction);函数jarrollfunction(){var body=document.body;//对于Safarivar html=document.documentElement;//Chrome、Firefox、IE和Operabody.scrollTop=0;html.scrollTop=0;}<button id=“jarscoolbtn”>滚动内容</button>html,正文{滚动行为:平滑;}