[26天] 页面刷新后滚动条回到顶部_Javascript_西西优一点

阅读：1645 时间：2022年06月11日

浏览器默认行为如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？不优雅的方式：...

浏览器默认行为

如果浏览器不是强制刷新（Ctrl + F5），而是普通刷新（点击刷新按钮，或者按下 F5 刷新），则页面重新载入完毕后，滚动条会调到之前访问的位置。

大多数时候，这种体验对用户是友好的。但如果我我们希望滚动条回到顶部该如何处理？

不优雅的方式：

在页面加载完成事件中执行：

document.documentElement.scrollTop = 0

浏览器已经提供了原生的 API，可以轻松实现浏览器滚动后每次都回到顶部的能力。

只需在页面中执行：

if (history.scrollRestoration) {
  history.scrollRestoration = 'manual';
}

语法：

history.scrollRestoration 有下面两个值

兼容性：

现代浏览器全都支持！所以放心使用！

声明：本站内容为辛苦创作，如转载需注明出处：西西优一点( http://www.ccued.com/ ) 程序:ZBP