Javascript [26天] 页面刷新后滚动条回到顶部

0

[26天] 页面刷新后滚动条回到顶部

阅读:34 时间:2022年06月11日

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

浏览器默认行为

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

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

不优雅的方式:

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

document.documentElement.scrollTop = 0

原生的 API

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

只需在页面中执行:

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

语法和兼容性

语法:

history.scrollRestoration 有下面两个值

  • auto

    默认值,滚动位置会被存储

  • manual

    滚动的位置不会被存储

兼容性:

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


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^