使用 JavaScript 滚动到页面顶部?

IT技术 javascript scroll
2021-01-28 15:40:37

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

6个回答

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

window.scrollTo(xCoord, yCoord);

参数

  • xCoord 是沿水平轴的像素。
  • yCoord 是沿垂直轴的像素。
在 Firefox 40 和 Chrome 44 中为我工作(针对 Mikhail 的评论)
2021-03-13 15:40:37
这个答案与问题无关。如果问题是:我应该使用什么脚本和方法滚动到页面顶部?正确答案在这里:stackoverflow.com/questions/4147112/...
2021-03-17 15:40:37
这就是我的观点,如果您不需要为平滑滚动设置动画,那么您就不需要使用 jQuery。
2021-03-28 15:40:37
有趣的是,jeff 的评论对于那些只想在 95% 的时间里跨浏览器工作的人来说应该只是使用 jQuery。这是来自现在必须编写大量纯 javascript 的人,因为我们无法承受库减慢广告代码的开销:(
2021-04-02 15:40:37
滚动到页面底部 window.scrollTo(0, document.body.scrollHeight);
2021-04-07 15:40:37

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

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

这将采用任何<a>标签,href="#top"并使其平滑滚动到顶部。

“html”和“body”都是浏览器兼容性所必需的,即 Chrome v27 仅使用“body”滚动,而 IE8 则不需要。IE8 仅使用“html”滚动,但 Chrome v27 不会。
2021-03-13 15:40:37
@jalchr 实际上,window.pageYOffset这将是窗口 e̶l̶e̶m̶e̶n̶t̶ 对象的属性。
2021-03-15 15:40:37
+1。我只是想知道如何做这样的事情,谷歌把我带到这里。问题是,文档中的“scrollTop”函数在哪里?我只是看了看,但找不到。
2021-03-18 15:40:37
scrollTop 不是函数,它是窗口元素的一个属性
2021-03-31 15:40:37
这在使用 animate 的完整回调时无法正常工作,因为它会运行两次。
2021-03-31 15:40:37

具有流畅动画的更好解决方案:

// 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

有人可以在 Safari 或 Internet Explorer 上测试这个,看看它是否工作正常吗?谢谢
2021-03-31 15:40:37
@FabioMagarelli 在 Safari 上运行良好,未在 IE 上测试。仅供参考以在 safari 上进行测试,打开任何具有滚动功能的页面并将上述代码复制粘贴到开发人员工具 -> 控制台中,它将滚动到顶部验证(Safari 版本 13.0.5)。
2021-04-07 15:40:37
您可能仍然需要对ScrollOptions(对于某些浏览器)的polyfill支持github.com/iamdustan/smoothscroll
2021-04-08 15:40:37
我非常喜欢这个解决方案。
2021-04-08 15:40:37

试试这个滚动到顶部

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
这是一样的: if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; }
2021-03-13 15:40:37
谁知道这么简单!谢谢 :)
2021-03-31 15:40:37

您不需要 jQuery 来执行此操作。一个标准的 HTML 标签就足够了......

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>
好的!有没有办法让它平滑滚动?
2021-03-10 15:40:37
+1 如果您需要导航到特定元素而不是顶部,这很好。
2021-03-14 15:40:37
使用“<a href="#">Top</a>”跳转到页面顶部。
2021-03-21 15:40:37
这似乎是处理 SPA 时最好的方法
2021-03-21 15:40:37
如果您getElementById在页面中间使用调用另一个按钮,这将不起作用
2021-04-05 15:40:37