如何实现页面刷新后不定位到之前的滚动位置

news2024/11/13 13:43:05

一、浏览器默认行为

无论是哪个浏览器,都有这样一个体验细节。

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

大多数时候,这种体验对用户是友好的。

但是,实际开发中,我们总会存在不希望用户刷新记住之前滚动位置的情况。

这个时候该怎么办呢?

曾几何时,我是在页面 load 完毕之后,在足够安全的时间之后设置页面的 scrollTop 为 0。

二、history.scrollRestoration

使用很简单,在页面的任意位置执行下面几行 JS 代码就可以了

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

 

三、语法和兼容性

history.scrollRestoration 支持下面两个属性值:

auto 默认值,表示滚动位置会被存储。

manual单词的意思就是手动。表示,滚动的位置不会被存储。

兼容性

兼容性很不错,现代浏览器很早就支持了,移动端放心使用(IE不支持)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237654.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PyTorch项目实战】图像分割 —— U-Net:Semantic segmentation with PyTorch

文章目录 一、项目介绍二、项目实战2.1、搭建环境2.1.1、下载源码2.1.2、下载预训练模型2.1.3、下载训练集 2.2、环境配置2.3、模型预测 U-Net是一种用于生物医学图像分割的卷积神经网络架构,最初由Olaf Ronneberger等人于2015年提出。 论文: U-Net: Con…

开源竞争-大数据项目期末考核

开源竞争: 自己没有办法完全掌握技术的时候就开源这个技术,培养出更多的技术依赖,让更多人完善你的技术,那么这不就是在砸罐子吗?一个行业里面总会有人砸罐子的,你不如先砸还能听个想。 客观现实&#xf…

11月7日星期四今日早报简报微语报早读

11月7日星期四,农历十月初七,早报#微语早读。 1、河南:旅行社组织1000人次境外游客在豫住宿2夜以上,可申请激励奖补; 2、主播宣称下播后商品恢复原价构成欺诈,广州市监:罚款5万元;…

HTMLCSS:3D 旋转卡片的炫酷动画

效果演示 这段代码是一个HTML和CSS的组合&#xff0c;用于创建一个具有3D效果的动画卡片。 HTML <div class"obj"><div class"objchild"><span class"inn6"><h3 class"text">我是谁&#xff1f;我在那<…

词嵌入方法(Word Embedding)

词嵌入方法&#xff08;Word Embedding&#xff09; Word Embedding是NLP中的一种技术&#xff0c;通过将单词映射到一个空间向量来表示每个单词 ✨️常见的词嵌入方法&#xff1a; &#x1f31f;Word2Vec&#xff1a;由谷歌提出的方法&#xff0c;分为CBOW&#xff08;conti…

2024下半年系统架构师考试【回忆版】

2024年11月10日&#xff0c;系统架构师考试如期举行&#xff0c;屡战屡败的参试倒是把北京的学校转了好几所。 本次考试时间 考试科目考试时间综合知识、案例分析8:30 - 12:30论文14:30 - 16:30 案例分析 1、RESTful 对于前后端的优势&#xff1b; 2、心跳相对于ping/echo的…

最简单解决NET程序员在centos系统安装c#网站

目前随着技术栈转移&#xff0c;c#程序员如何在linux服务器中部署net程序呢&#xff1f; 我做了一次实验&#xff1a;一般来说runtime和sdk都要装。 1.centos系统内命令行输入命令 sudo yum install dotnet-sdk-6.0 安装6.0版 2.检测下是否成功&#xff1a;dotnet --versio…

参数估计理论

估计理论的主要任务是在某种信号假设下&#xff0c;估算该信号中某个参数&#xff08;比如幅度、相位、达到时间&#xff09;的具体取值。 参数估计&#xff1a;先假定研究的问题具有某种数学模型&#xff0c; 如正态分布&#xff0c;二项分布&#xff0c;再用已知类别的学习样…

java多线程stop() 和 suspend() 方法为何不推荐使用?

大家好&#xff0c;我是锋哥。今天分享关于【java多线程stop() 和 suspend() 方法为何不推荐使用&#xff1f;】面试题。希望对大家有帮助&#xff1b; java多线程stop() 和 suspend() 方法为何不推荐使用&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网…

嵌入式硬件电子电路设计(三)电源电路之负电源

引言&#xff1a;在对信号线性度放大要求非常高的应用需要使用双电源运放&#xff0c;比如高精度测量仪器、仪表等;那么就需要给双电源运放提供正负电源。 目录 负电源电路原理 负电源的作用 如何产生负电源 负电源能作功吗&#xff1f; 地的理解 负电压产生电路 BUCK电…

C++高级编程(8)

八、标准IO库 1.输入输出流类 1)非格式化输入输出 2)put #include <iostream> #include <string> ​ using namespace std; int main() {string str "123456789";for (int i str.length() - 1; i > 0; i--) {cout.put(str[i]); //从最后一个字符开…

Python 分子图分类,GNN Model for HIV Molecules Classification,HIV 分子图分类模型;整图分类问题,代码实战

一、分子图 分子图&#xff08;molecular graph&#xff09;是一种用来表示分子结构的图形方式&#xff0c;其中原子被表示为节点&#xff08;vertices&#xff09;&#xff0c;化学键被表示为边&#xff08;edges&#xff09;。对于HIV&#xff08;人类免疫缺陷病毒&#xff…

如何调整pdf的页面尺寸

用福昕阅读器打开pdf&#xff0c;进入打印页面&#xff0c;选择“属性”&#xff0c;在弹出的页面选择“高级” 选择你想调成的纸张尺寸&#xff0c;然后打印&#xff0c;打印出来的pdf就是调整尺寸后的pdf

查缺补漏----用户上网过程(HTTP,DNS与ARP)

&#xff08;1&#xff09;HTTP 来自湖科大计算机网络微课堂&#xff1a; ① HTTP/1.0采用非持续连接方式。在该方式下&#xff0c;每次浏览器要请求一个文件都要与服务器建立TCP连接当收到响应后就立即关闭连接。 每请求一个文档就要有两倍的RTT的开销。若一个网页上有很多引…

koa、vue安装与使用

koa官网&#xff1a;https://koajs.com/ 首选创建一个文件夹&#xff1a;mkdir koaDemo (cmd即可) 文件夹初始化&#xff1a;npm init (cmd即可) 初始化完成后就会产生一个package.json的文件。 安装&#xff1a; npm install koa --save (vscode的控制台中安装&a…

Linux:版本控制器git的简单使用+gdb/cgdb调试器的使用

一&#xff0c;版本控制器git 1.1概念 为了能够更方便我们管理不同版本的文件&#xff0c;便有了版本控制器。所谓的版本控制器&#xff0c;就是能让你 了解到⼀个文件的历史&#xff0c;以及它的发展过程的系统。通俗的讲就是⼀个可以记录工程的每⼀次改动和版本迭代的⼀个…

ML 系列:第 21 节 — 离散概率分布(二项分布)

一、说明 二项分布描述了在固定数量的独立伯努利试验中一定数量的成功的概率&#xff0c;其中每个试验只有两种可能的结果&#xff08;通常标记为成功和失败&#xff09;。 二、探讨伯努利模型 例如&#xff0c;假设您正在抛一枚公平的硬币 &#xff08;其中正面成功&#xff…

【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美

文章目录 C 位运算详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;位运算基础应用1.1 判断字符是否唯一&#xff08;easy&#xff09;解法&#xff08;位图的思想&#xff09;C 代码实现易错点提示时间复杂度和空间复杂度 1.2 丢失的数字&#xff08;easy&#xff0…

存算分离与计算向数据移动:深度解析与Java实现

背景 随着大数据时代的到来&#xff0c;数据量的激增给传统的数据处理架构带来了巨大的挑战。传统的“存算一体”架构&#xff0c;即计算资源与存储资源紧密耦合&#xff0c;在处理海量数据时逐渐显露出其局限性。为了应对这些挑战&#xff0c;存算分离&#xff08;Disaggrega…

WPS单元格重复值提示设置

选中要检查的所有的单元格 设置提示效果 当出现单元格值重复时&#xff0c;重复的单元格就会自动变化 要修改或删除&#xff0c;点击