scrollTop在滚动之前返回顶部

在计算机编程中，scrollTop是一个属性，用于获取或设置元素在垂直滚动条上滚动的像素值。换句话说，scrollTop表示页面顶部与视口顶部之间的距离。当页面内容发生滚动时，scrollTop的值会发生变化。

在JavaScript中，可以通过以下方式获取和设置scrollTop的值：

// 获取 scrollTop 的值
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// 设置 scrollTop 的值
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;

在某些情况下，例如在滚动事件中，可能需要在滚动之前将页面返回到顶部。这可以通过将scrollTop的值设置为0来实现。

window.addEventListener('scroll', function() {
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
});

请注意，这种方法可能会导致用户体验不佳，因为它会在用户滚动页面时立即将页面返回到顶部。在实际应用中，请根据具体需求谨慎使用。

相关·内容

jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部

说在前面：在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示返回顶部按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。...语法： $(selector).scroll() 应用：我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。...HTML部分：返回顶部 CSS部分： body{ height: 2000px; } .goTop{ position...{ $('.goTop').fadeOut(); } }) /*点击返回顶部*/ $('.goTop...').click(function() { $('body,html').animate({ scrollTop: 0 }

6.1K3 0

vue中返回顶部封装的组件滚动一定位置显示隐藏

用两个不同方式写的返回顶部返回顶部子组件1 顶部1</...this.isShow = true; } else { this.isShow = false; } }, //返回顶部...backtop() { let top = document.documentElement.scrollTop || document.body.scrollTop; // 实现滚动效果...50px; height: 50px; border: 1px solid; position: fixed; bottom: 50px; left: 20px; } 返回顶部子组件...this.isShow = true; } else { this.isShow = false; } }, back() { //返回顶部

1.7K3 0

js 做返回顶部效果

定时器 setInterval 做返回顶部的动画效果 6....清除定时器实现步骤：注册窗口滚动事件滚动离顶部的距离大于300时，显示ICON 注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0 用定时器做返回顶部的滚动效果...注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0 var returnTopICON = document.getElementById("returnTop...用定时器做返回顶部的滚动效果 var dsj = setInterval(function(){ var distance = Math.max...if(distance <= 0){ //如果滚动的距离 <= 0 时，清除掉定时器，否则点击图标滚动到顶部后，不能往下拉，一拉就又滚动到顶部

10.4K3 0

详解各种获取元素宽高及位置的属性

介绍这两个属性之前，先介绍下 offsetParent 属性，这样有助于理解。...一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。...此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数（这个特性在chrome浏览器中不存在）。...; 完整的获取文档/页面在水平方向已滚动的像素值的兼容性代码： var x = (window.pageXOffset !.../页面在垂直方向已滚动的像素值，其中 pageYOffset 属性是 scrollY 属性的别名 var scrollX = window.scrollY; 完整的获取文档/页面在垂直方向已滚动的像素值的兼容性代码

3.8K8 0

html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…

当元素的style.display设置为 “none” 时，offsetParent返回null。它返回当前元素相对于其offsetParent元素的顶部的距离。...所以当滚动条在最顶端的时候，scrollTop=0，当滚动条在最低端的时候，scrollTop=115 这个115怎么来的(滚动条高度是15，我量的)，见下图。(实为我主观臆测，不保证准确性。。。...判定元素是否滚动到底： element.scrollHeight – element.scrollTop === element.clientHeight 返回顶部 element.scrollTop...= 0 一个简单的返回顶部的时间，一个需要注意的地方是，动画是由快到慢的。...返回顶部 function toTop(ele) { // ele.scrollTop = 0; let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小

2.1K2 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此 <body style="...元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度　　由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...如果没有提供该参数，默认为true 　　使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果

5.1K2 1

JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。它返回当前元素相对于其 offsetParent 元素的顶部的距离。...所以当滚动条在最顶端的时候， scrollTop=0 ，当滚动条在最低端的时候， scrollTop=115 这个115怎么来的（滚动条高度是15，我量的），见下图。...如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。...判定元素是否滚动到底： element.scrollHeight - element.scrollTop === element.clientHeight 返回顶部 element.scrollTop...= 0 一个简单的返回顶部的时间，一个需要注意的地方是，动画是由快到慢的。

7751 0

html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记…

8402 0

防抖函数与节流函数

，根据滚动位置显示返回顶部按钮通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配...); } 　　效果如下：从效果上，我们可以看到，在页面滚动的时候，会在短时间内触发多次绑定事件。...函数防抖定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。...比如，我们在监听滚动条位置，控制是否显示返回顶部按钮时，就可以将防抖函数应用其中。...原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

8673 0

前端实战项目·优雅实现 BackTop

优雅实现 BackTop BackTop 即滚动到页面顶部，是很多网站都会用到的基础功能，实现方法很多，Github 上也有许多优秀的三方库，如 smooth-scroll，但如何优雅实现也是一门学问...事件绑定和解绑滚动到页面顶部的按钮一般位于页面角落，并且只有在需要的时候才显示出来。所以首先需要监听页面滚动事件，直到滚动到一定距离后显示 BackTop 按钮。...window.requestAnimationFrame() 方法请求浏览器在下一次重绘之前调用指定的函数来更新动画。...该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。回调的次数通常是每秒 60 次。由于兼容问题，在不同浏览器需要带上前缀，并且在浏览器不支持时使用 setTimeout 模拟。...使用 requestAnimationFrame 来实现滚动到页面顶部的动画，核心是按帧来滚动小段距离来实现平滑滚动的效果，代码如下： // scrollTop animation export function

5514 0

scrollTop()方法

scrollTop设置滚动条用法前提工作中需要做一个点击右侧网元或板卡，左侧topo图滚动到对应位置用到的知识点 scrollTop(),position()，工作环境中用了Jtopo,Ztree...scrollTop定义与用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。...如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。...$(selector).scrollTop(offset) //offset可选 position定义与用法 position() 方法返回匹配元素相对于父元素的位置（偏移）。...只要弄明白，滚动条的获取是相对于其顶部的，就简单多了，加油！

1.2K1 0

jQuery 尺寸、位置操作

3. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧 ① scrollTop() 方法设置或返回被选元素被卷去的头部。... 返回顶部...} else { $(".back").fadeOut(); } }); // 返回顶部...案例：带有动画的返回顶部 1.核心原理：使用animate动画返回顶部 2.animate动画函数里面有个scrollTop 属性，可以设置位置 3.但是是元素做动画，因此 $(“body,html...} else { $(".back").fadeOut(); } }); // 返回顶部

1.1K2 0

vue返回上一页面时回到原先滚动的位置

项目结束，测试时发现在首页商品列表中，向上滑动几页后点击进入详情，从详情页面返回商品列表时，页面回到了最顶部，测试不通过说是用户体验不好，要求从哪里点击进去返回该页面时回到原先的滚动页面。...中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的。...但是在手机上测试，发现没用，解决手机上实现目的的方法： //在页面离开时记录滚动位置 beforeRouteLeave (to, from, next) { this.scrollTop =...document.documentElement.scrollTop || document.body.scrollTop next() }, //进入该页面时，用之前保存的滚动位置赋值 beforeRouteEnter...(to, from, next) { next(vm => { document.body.scrollTop = vm.scrollTop }) }, OK！

2.9K2 0

rAF实现表格内容自动滚动

rAF实现表格内容自动滚动前言实习导师让我实现表格内容自动滚动，实际就是大屏项目可能会用上的。正好之前看到rAF的介绍，实际上也没用过，所以就用rAF来玩一波。...目标：让表格的内容会自动滚动鼠标悬浮，动画停止到底后会自动回到顶部，继续滚动 element表格自带滚动首先呢，element的表格是自带了滚动效果的，但是需要小小的设置一下。...，很简单，只需要让滚动容器的scrollTop一直加就行了。...，继续滚动这里我们需要判断是否到底了，所以需要使用可视高度+距离顶部 >= 整个高度的方式，即el.clientHeight + el.scrollTop >= el.scrollHeight....，但是有时候需要突出排在前面的话，可能会到顶部需要慢慢地回滚到顶部，再重新自动滚动。

2K2 0

纯滚动怎么理解_scrollview不滚动

回到顶部　　可以利用scrollTop来实现回到顶部的功能 function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop..."> 回到顶部 function scrollTop(){ if((document.body.scrollTop...如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...如果当前元素在视口中可见，这个方法什么也不做　　如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部(垂直方向) 　　[注意]该方法只有chrome和safari支持...本文中并未详细介绍滚动条，详细内容移步至此　　下文将以实例的形式，对滚动的属性和方法进行应用，总结回到顶部的多种写法，并尝试优化发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn

1.9K2 0

返回顶部的几种方法总结

放置位置在标签之后随便找个地方放都可以，只要靠近顶部即可。...页面底部放置：返回顶部二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置，有两种很简单的实现方式...方式2（注重效果：缓慢向上）：本方式是渐进式返回顶部，要好看一些，代码如下：scrollBy函数第二个参数我设了-100，越大（比如-10）滚动越慢，越小滚动越快 function pageScroll... 或者返回顶部返回顶部这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行...if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay); 缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面

1K1 0

Jquery实现一键返回顶部

一、需求分析当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。...现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家： ?...display: none; } #Back-to-the-top .layui-icon { font-size: 50px; color: #333; } Jquery代码： // 返回顶部...window.onscroll = function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset... || document.body.scrollTop; $("#Back-to-the-top").css("display",(scrollTop >= 300) ?

1.7K3 0

【前端词典】4 种滚动吸顶实现方式的比较

前言我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。...后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的 4 种滚动吸顶实现方式做详细介绍。...(在 IE 中，默认坐标从(2,2)开始计算，只返回 top,lef,right,bottom 四个值) 2. offsetTop: 用于获得当前元素到定位父级（ element.offsetParent...）顶部的距离（偏移值）。...scroll 滚动监听事件，在滚动停止时才触发其相关的事件。

2.5K6 0

造一个 react-infinite-scroller 轮子

: 是一个只读属性，返回一个元素的布局高度 window.pageYOffset: 其实就是 scrollY 的别名，返回文档在垂直方向已滚动的像素值 window.innerHeight: 为浏览器窗口的视口的高度...上面公式里“当前窗口顶部与很长元素顶部的距离 + offsetHeigh”在页面里是定死的，而 window.pageYOffset - window.innerHeight 会随着滚动而改变，两者相减则为...，滚动条的位置不应该还停留在 scrollY = 0 的位置，不然会一直加载更多，比如此时滚动到了顶部： 3 <- 到顶部了，开始加载 2 1 0 加载更多后 6 <- 不应该停留在这个位置，因为会再次触发无限滚动...) 其中 calculateTopPosition 为递归地计算元素顶部到浏览器窗口顶部的距离 window 向上滚动：window.pageYOffset || doc.scrollTop 其中 doc...还有一点，在添加 listener 的时候可以触发一次 listener 作为 initialLoad 向上滚动的时候，在 componentDidUpdate 里要把滚动条设置为上一次停留的地方，否则滚动条会一直在顶部

2.5K3 0

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

设置哪个方向可滚动，则在哪个方向滚动到该元素 scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡 enable-back-to-top Boolean...false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向微信小程序 show-scrollbar Boolean false 控制是否出现滚动条 App-nvue 2.1.5+...：　　设置一个scrollTop设置竖向滚动条的位置，首先默认为0，当页面向下滚动会触发scroll-top事件从而改变scrollTop的值，当切换到第二个scroll-view时在默认设置scrollTop...为0，那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部，从而解决了默认滚动到最底部加载多次数据的问题。...this.scrollTop=0;//回到最顶部 }, } }

7.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云