首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

重新加载父页面后,将scrollTop设置回其原始位置

的方法可以通过以下步骤实现:

  1. 首先,需要获取父页面的scrollTop值,即页面滚动的垂直距离。可以使用JavaScript的document.documentElement.scrollTop或document.body.scrollTop属性来获取。
  2. 在重新加载父页面后,可以使用JavaScript的window.onload事件来监听页面加载完成的事件。
  3. 在window.onload事件中,将scrollTop值设置为原始位置。可以使用JavaScript的document.documentElement.scrollTop或document.body.scrollTop属性来设置scrollTop值。

下面是一个示例代码:

代码语言:txt
复制
window.onload = function() {
  // 获取原始的scrollTop值
  var originalScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 重新加载父页面后,将scrollTop设置回原始位置
  document.documentElement.scrollTop = originalScrollTop;
  document.body.scrollTop = originalScrollTop;
};

这样,在重新加载父页面后,页面会自动滚动到原始位置。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络)

  • 概念:腾讯云CDN是一种分布式部署的网络加速服务,通过将内容缓存到离用户最近的节点服务器上,提高内容的访问速度和用户体验。
  • 优势:提供全球覆盖的加速节点、高可用性和可靠性、智能调度和负载均衡、安全防护等。
  • 应用场景:网站加速、文件分发、视频点播、直播加速等。
  • 产品介绍链接地址:腾讯云CDN

请注意,以上答案仅供参考,具体的实现方式和推荐产品可能因实际需求和环境而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Scroll,你玩明白了嘛?

2.3 注意 1、在可滚动的容器上设置了 scroll-behavior: smooth 之后,优先级是高于 JS 方法的。...、 scrollLeft 去设置滚动位置: // 设置 container 上滚动距离 200 container.scrollTop = 200; // 设置 container 左滚动距离 200...举个例子,现在我希望在列表组件加载完成,列表能够自动滚动到第三个元素。...scrollTo 等原生方式,显然没有给我们提供调方法,来告诉我们滚动在什么时候结束。所以我们还是需要依赖 onScroll 去监听当前的滚动位置,来得知滚动什么时候达到目标位置。...3、用一个 button 来触发脚本滚动,调用 listScroll 方法,传入容器 ref,想要滚动到的 scrollTop 以及滚动结束的 callback 方法。

3.1K22

js中的防抖和节流

一、目的:防止函数被无意义高频调用 二、理解: 1、防抖(debounce) 本质:函数在特定的时间内不再被调用后执行 原理:设置一个定时器,如果在设定的时间间隔内事件再次触发,就会清除上一次的定时器并重新设置和计时...; console.log('滚动条位置:' + scrollTop); } function debounce(fn, delay) { let timer = null; //借助闭包...|| document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop); } function throttle(fn,delay...原理是维护一个计时器,规定在delay时间触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。 函数节流:使得一定时间内只触发一次函数。...比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

1.4K20
  • 金九银十,为期2周的前端面经汇总(初级前端)

    它可以有以下作用 为元素设置鼠标悬停上时的样式 链接已点击和未点击时的样式 设置元素获得焦点的样式 定位 静态定位 相对定位 改变的位置是参照自己原来的位置 绝对定位(脱标) 先找已经定位的级...animation-direction:设置动画在每次运行完是反向运行还是重新回到开始位置重复运行。...原生js实现 scrollTop 判断图片滚动的距离, innerHeight求当前视口高度,offsetTop得到图片相对于元素的位置,然后 scrollTop + clientH - elementTop...而子组件修改好数据采用$emit方法数据传递给组件。...如何解决跨域问题 cors jsonp 设置代理服务器(前端) vue.config.js中⭐ 同步异步 异步发展历程 调函数 解决了同步问题 但是产生了调地狱,不能用try catch捕获

    3K20

    前端常见问题和技术解决方案

    4)window.name + iframe 跨域window.name 属性的独特之处:name 值在不同的页面(甚至不同域名)加载依旧存在,并且可以支持非常长的 name 值(2MB)。...页面打开的新窗口的数据传递b.) 多窗口之间消息传递c.) 页面与嵌套的 iframe 消息传递d.) 上面三个场景的跨域数据传递<!...2)当清除完,鼠标移出需要重新启动计时器,这时候不能再给它设置 var jishi; 因为如果再加上 var 的话,相当于重新又定义了一个变量,会有好几个计时器同时进行,会越来越快。3....,new Image () ,不会加载页面上去,实现隐形加载替换真图片替换 src 属性页面布局位置基础知识网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight...path 属性默认为 web 应用的上下文路径利用 Cookie 的这个特点,我们只需要将 Cookie 的 domain 属性设置域的域名(主域名),同时 Cookie 的 path 属性设置为根路径

    2K11

    54个CSS重难点整理,12-24篇,进阶高薪必需要掌握的知识点

    CSS,还可以定义rel等属性 @import是css提供的语法,只有导入样式表的作用 加载顺序 link在页面加载时CSS同时被加载 引入的CSS要等页面加载完毕加载 DOM可控性 js控制DOM...em: 相对于元素的文本的倍数。如果元素未设置 font-size,则相对于浏览器的默认字体尺寸(默认 16px)。...减少使用 @import,建议使用 link,因为 link 在页面加载时一起加载,import 是页面加载完成之后再加载。...--清除浮动--> 级添加overflow属性,或者设置高度 级添加伪元素::after来清除浮动 .parent:...在有滚动条的页面中,absolute 会跟着元素进行移动,fixed 固定在页面的具体位置

    1.3K10

    前端高薪必会的JavaScript重难点知识:防抖与节流详解

    我们希望当我们抬起键盘间隔几百毫秒再触发keyup事件处理函数发送请求查询(如果在间隔时间内再次触发keyup事件,就会把上一次的定时器清除,重新再计时)。...所以在所有电话号码输入完成,400ms就触发了一次查询操作。这样做的好处减少事件调执行,提高浏览器性能。...三、什么是防抖及应用场景 防抖的概念 在连续的事件中,只需触发最后一次调,也就是几次操作合并为一此操作进行。...原理是维护一个计时器,规定在delay(延迟)时间触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。...我们通过监听浏览器scroll事件来断判断滚动条位置,如果滚动条滚动到页面的最底部,则就会加载更多信息。因为滚动时会频繁触发scroll事件,就会造成频繁的判断滚动条位置

    1.9K00

    前端面试实录CSS篇(最近一周)

    加载差异:link 引用的 css,在页面加载时同时加载。而 @import 在页面加载加载 3. 兼容性:link 是 html 标签,没有兼容问题。...当重置浏览器大小的过程中,页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解,如何创建 BFC?...解决高度塌陷问题:在对子元素设置浮动元素会发生高度塌陷,也就是元素的高度变为 0。解决这个问题,只需要把元素变成一个 BFC。常用的办法是给元素设置overflow:hidden。 3....• absolute: 绝对定位的元素的位置相对于最近的已定位元素,如果元素没有已定位的元素,那么它的位置相对于 • relative: 相对定位元素的定位是相对正常位置 • fixed: 元素的位置相对于浏览器窗口是固定位置...与 fixed 的根元素不同,absolute 的根元素可设置,fixed 的根元素是html • 在有滚动的页面中,absolute 会跟随元素进行滚动,而 fixed 固定在某个位置 27.

    11110

    记录工作中遇到的各种问题(Bug,总结,记录)

    页面使用Angular.js(1),页面中iframe中初始设置src属性的话,会导致页面重新加载一次 例如设置一个初始值,某些操作之后再更改src <iframe src="#" class="export-iframe...<em>父</em><em>页面</em>中有iframe,iframe里面有分页按钮,在<em>父</em><em>页面</em>对iframe做<em>加载</em>之后监听iframe中点击事件的操作,初始第一页正常,但点击第二页之后事件就失效了 原代码: ?...在某些手机的微信中,分享<em>页面</em>成功<em>后</em>,会有已分享的提示信息,但有些手机却没有 所以开发<em>页面</em>的时候,还得自行加个已分享的<em>回</em>调提示,心桑.. 15....在离开当前<em>页面</em>时判断是否有更改,做出提示 新版本浏览器基于安全机制,不能<em>设置</em>提示的样式,也不能<em>设置</em>提示中操作(确认和取消)的<em>回</em>调,也不能<em>设置</em>提示的文案(旧版的可以<em>设置</em>文案) ? ?... 一般来说,获取<em>页面</em>的垂直滚动<em>位置</em>通常使用document.body.<em>scrollTop</em>,其实这并不是标准的做法,属于旧规范里面的 在标准规范里是用document.documentElement.<em>scrollTop</em>

    18.1K12

    教你实现一个悬浮可拖动并在滑动页面时会自动收缩的vue侧边组件按钮

    : 0, //记录上一次滚动结束的滚动距离 scrollTop: 0, // 记录当前的滚动距离 } }, 复制代码 props接收级传来的参数 props: { itemWidth...:首先获得页面宽度并减去按钮宽度及距离页面两侧的距离得到按钮的初始宽度位置,再通过页面高度*页面上下的距离比例得到组件的高度位置 created() { this.clientWidth = document.documentElement.clientWidth...this.left = touch.clientX - 20 this.top = touch.clientY - 25 } }) // 拖拽结束以后,重新调整组件的位置重新设置过度动画...= window.scrollY; }) }, 复制代码 开始滑动 当组件开始滑动时判断上次滑动距离是否等于监听到的Old值,等于则说明开始滑动,这时我们可以组件距离侧边的距离减去组件自身的一半宽度...,等于则代表了停止滑动,这时判断一下当前组件在页面左侧还是右侧并调整相关的距离参数,这样就实现了停止拖动按钮时按钮自动缩至侧边的效果。

    4.8K40

    jQuery笔记(3)

    ,就需要用到遍历 语法1: $("div").each(function(index, domEle){xxx;}) each()方法遍历匹配的每一个元素.主要用DOM处理.each每一个 里面的调函数有...本文由“壹伴编辑器”提供技术支持 jQuery尺寸 本文由“壹伴编辑器”提供技术支持 jQuery位置 位置主要有三个: offset(),position(), scrollTop()/scrollLeft...()(可以获取+设置) (真的好多啊,已经和原生的记混了...) offset() 获取设置距离文档的位置 position() 获取距离带有定位位置 如果没有带定位的级元素,则以文档为主....因为scrollTop( )是可以获取和设置的,所以scrollTop(0)就是返回顶部 电梯导航栏案例: 一开始把offset()记成width()了,难住了好久......但是这个导航栏其实是有bug的,比如我们重新刷新页面时,即使页面在很下面,导航栏也没有出现 这是因为我们将它放入了滚动事件中,刚刷新完是没有滚动的,所以自然不会出现,所以我们要将里面的代码封装成函数

    66710

    造一个 react-infinite-scroller 轮子

    相当于上面的 “很长元素总高度” scrollTop: 可以获取或设置一个元素的内容垂直滚动的像素数。...还有一个问题:刚进页面的时候,高度为 0,假如此时 offset < threshold 理应触发“加载更多”,然而这个时候用户并没有做任何滚动,滚动事件不会被触发,“加载更多”也不会被触发,这其实并不符合我们的预期...,滚动条的位置不应该还停留在 scrollY = 0 的位置,不然会一直加载更多,比如此时滚动到了顶部: 3 <- 到顶部了,开始加载 2 1 0 加载更多 6 <- 不应该停留在这个位置,因为会再次触发无限滚动...,用户体验不友好 5 4 3 <- 应该停留在原始位置,用户再向上滚动才再次加载更多 2 1 0 为了达到这个效果,我们要记录上一次的 scrollTop 和 scrollHeight,然后在组件更新的时候更新...,一直触发“加载更多” 在 mousewheel 里 e.preventDefault 解决“加载更多”时间超长的问题 添加被动监听器,提高页面滚动性能

    2.6K30

    前端性能优化 常见面试题速查

    可能会导致回流的操作有: 页面的首次渲染 浏览器窗口大小发生变化 元素的内容发生变化 元素的尺寸或者位置发生变化 元素的字体大小发生变化 激活 CSS 伪类 查询某些属性或者调用某些方法 添加或者删除可见的...:对渲染树的某部分或者一个渲染对象进行重新布局 # 重绘 当页面中某些元素的样式发生变化,但是不会影响在文档流中的位置时,浏览器就会对元素进行重新绘制,即重绘。...,可以创建一个文档片段 documentFragment,然后把需要操作的元素添加到文档片段中,在片段中进行 DOM 操作,最后一起插入到文档中 元素设置为 display: none,进行操作结束再把它显示出来...可以动画的 position 属性设置为 absolute 或 fixed,动画脱离文档流,这样他的回流就不会影响页面了。...和直接操作 DOM 相比, DocumentFragment 节点插入 DOM 树时,不会触发页面的重绘,大大提高了页面的性能。

    43820

    写了个自定义指令,支持elementUI2.0下拉框组件虚拟列表显示

    = wrap.scrollTop; // 计算当前滚动位置,获取当前开始的起始位置 const currentIndex = Math.floor(scrollTop...// console.log(startIndex, 'startIndex222', currentIndex); // 根据滚动条获取当前索引与起始索引不相等时,滚动的当前位置设置为起始位置...2、设置滚动容器内部高度scrollView【必须要设置】,不设置的话,内容数据无法滚动显示 let { data, rowHeight, startIndex, callback } = binding.value...scrollTop = wrap.scrollTop; // 计算当前滚动位置,获取当前开始的起始位置 const currentIndex = Math.floor(scrollTop /...rowHeight); // console.log(startIndex, 'startIndex222', currentIndex); // 根据滚动条获取当前索引与起始索引不相等时,滚动的当前位置设置为起始位置

    2.2K20

    高级前端二面常见面试题总结_2023-02-27

    解决高度塌陷的问题:在对子元素设置浮动元素会发生高度塌陷,也就是元素的高度变为0。解决这个问题,只需要把元素变成一个BFC。常用的办法是给元素设置overflow:hidden。...根据这个原理,我们使用HTML5 的data-xxx属性来储存图片的路径,在需要加载图片的时候,data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。...反向代理: 服务器为了能够工作负载分不到多个服务器来提高网站性能 (负载均衡)等目的,当受到请求,会首先根据转发规则来确定请求应该被转发到哪个服务器上,然后请求转发到对应的真实服务器上。...方法3:当页面出现业务定义的特征值时,则认为是白屏。比如“数据加载中”。 浏览器乱码的原因是什么?如何解决?...解决:元素position改为absolute或static; 元素没有设置position属性为非static属性。

    93520

    JS滑动滚动的n种方式

    1.3 浏览器的支持度 1.4 示例与推荐使用场景 原始位置图 我们定位如图红框的元素,从顶部开始示例 1.4.1 scrollIntoVIew() 页面滑动至级容器,但是子项并没有被滑动到可视区域...有出现容器滑动不到指定地方的问题,可以两次调用api(注意异步) 2 设置scrollTop/scrollLeft 2.1 基本用法 element.scrollTop=100; 当我们获取到一个元素...区别是设置behavior为'smooth'后会平滑滚动 3.2 使用说明 如果场景要求我们滚动页面到某个元素的位置,此时可以使用window.scrollTo(); 如果场景要求我们滚动到某个可滚动元素的位置...,此时可以使用element.scrollTo(); 相比较于上边的scrollIntoView,我们可以更自由的控制元素显示的位置 3.2 补充 设置横坐标无效的情况请确定下方出现了横向滚动条,即页面宽度需要大于浏览器宽度...常见误解:element.scrollTo并不是某个元素滚动到页面某个位置,而是如果该元素可滚动,设置该元素的滚动条 4 window.scrollBy或element.scrollBy 4.1 基本用法

    6.3K10

    实现瀑布流布局

    是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式...实例 主体思路是记录每一列的高度,容器相对定位,成员绝对定位,利用top与left属性控制位置,每次新增加成员时找到高度最低的那个将成员置于其下方,即可实现瀑布流布局。...如果不需要动态加入成员,而只是一次性加载供展示用,那么可以考虑使用flex布局容器设置为flex-direction: column;以及flex-wrap: wrap;并给予容器一个合适的高度来实现...initial-scale=1" /> #container{ position: relative; /* 容器...endLoad) init(); // 如果没有则递归调用继续加载 } (function(){ init(); // 打开页面自动加载

    85510

    3分钟搞定图片懒加载

    什么是图片懒加载 图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。...为什么需要懒加载 对于一个页面加载速度影响最大的因素之一就是图片资源,如果一个页面图片太多(比如某宝,某东等),整个页面的图片大小可以到达几百兆,即使在百兆宽带,全部下载的话,也需要上十秒的时间,这对于用户耐心的考验是巨大的...可以看出,10张图片是一次性全部加载完的。 下面改造成懒加载: 首先将页面上的图片的 src 属性设为空字符串,而图片的真实路径则设置在data-src属性中。...当页面滚动的时候需要去监听scroll事件,在scroll事件的调中,判断我们的懒加载的图片判断是否出现在视口内,如果出现在视口内,则将data-src赋值到src。...思路:当页面滚动的时候需要去监听scroll事件,在scroll事件的调中,判断滚动条是否滚动到最底部,如果是,则将将图片的 src 属性设置为data-src的值。

    2.4K20

    uni-app中使用scroll-view滚到底部时多次触发scrolltolower

    ,因此为了页面的数据加载顺畅决定使用上拉加载(简单的说就是数据分页显示)。...设置哪个方向可滚动,则在哪个方向滚动到该元素 scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡 enable-back-to-top Boolean...),在定时到期以后执行注册的调函数(简称防抖)。...时会自动滚动到页面的最底部:   设置一个scrollTop设置竖向滚动条的位置,首先默认为0,当页面向下滚动会触发scroll-top事件从而改变scrollTop的值,当切换到第二个scroll-view...时在默认设置scrollTop为0,那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部,从而解决了默认滚动到最底部加载多次数据的问题。

    8.5K10
    领券