1.实现有许多种方法，原理是监听页面高度实现滚动。

一、使用锚点

1）使用默认链接锚点，设置a链接的href属性值为"#top"即可实现
<div><a href=" ">返回顶部</a ></div>

2）href指向特定的id
<div id=“element1”>元素1</div>
<a href=“#element1”>回到元素1</a >

二、scrollTop属性:

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

document.body.scrollTop = document.documentElement.scrollTop = 0

三、scrollTo(0,0)方法:

参数为坐标点，（x,y）—坐标点
坐标x和y指定的点位于显示区域的左上角

四、scrollBy(dx,dy)方法：参数为距离 dx—表示水平距离，dy-表示垂直距离
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top)

参考文章：JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）_zh_rey的博客-CSDN博客_js offsettop这里是javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;window.innerHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offhttps://blog.csdn.net/zh_rey/article/details/78967174

2.js实现，动态返回顶部效果

<style>p {width: 100px;height: 50px;background: tomato;}div {width: 100px;height: 30px;background: yellowgreen;color: white;text-align: center;line-height: 30px;position: fixed; /*使用固定定位*/bottom: 50px;right: 50px;}
</style><p>1</p>
<p>2</p>...
<p id="special">12</p>...
<p>40</p>
<div id="toTop">back to top</div><script>var toTop = document.querySelector("#toTop");    toTop.style.display = "none";// 一开始div隐藏  window.addEventListener("scroll", scrollHandler);// 然后给window加事件监听，滚动条大于某个值时，div出现function scrollHandler(e) {        var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容写法，获取当前页面y轴的滚动距离if (distanceY > 50) {toTop.style.display = "block";} else {toTop.style.display = "none";}}// 然后给div添加点击事件，用计时器interval来循环，步长为5，scrollTop依次减5，时间每50ms循环一次，直到scrollTop为0清除计时器toTop.addEventListener("click", clickHandler);function clickHandler(e) {let timer = setInterval(function () {var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容if (distanceY == 0){clearInterval(timer);return;} var speed = Math.ceil(distanceY/16);//speed这个值从高变低，那么scrollTop就减得从快到慢，上回到顶部的速度就先快后慢document.documentElement.scrollTop=distanceY-speed;// document.documentElement.scrollTop=distanceY-5;//如果给速度一个确定的值，那回到顶部的就匀速}, 16);}</script>

思路：为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮。

为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以16的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧’的感觉。
转载：

scrollTop以及页面回到顶部相关推荐

js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子--页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享-- <!DOCTYPE html&g ...
Vue项目页面回到顶部
实现的方法: 一.借助element-plus框架的Backtop回到顶部组件(点击按钮缓慢回顶部) 注意:这个组件想显示出来,必须放到产生滚动效果的元素内部,且是放到最上面!所以必须明确是哪个元素有 ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
js实现网页页面回到顶部
<script language="javascript"> $(function(){var $backToTopTxt = "返回顶部", $b ...
uniapp页面回到顶部方法
本文讲的是在uniapp项目中实现页面回顶效果的方法.以下是代码(回顶可能多个页面都需要用到建议封装成一个组件) 一.方法一 <template><view class=" ...
vue-router常见问题解决方案。（滚轴回到顶部、页面跳转同一页面报错、手机电脑端路由跳转）
当页面跳转后,侧边滚轴会还是一个页面位置 //路由跳转后,页面回到顶部 router.afterEach(() => {document.body.scrollTop = 0;document. ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
锚点定位跳转到指定位置回到顶部功能
一.跳转到指定位置项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息数据 arrayList:[{ //不一一列出 ...
vue中平滑地回到顶部，回到底部
监听的滚动条需要平稳滑动,所以设置几个值,一个定时器.一个定义的scrollTop,方便后续操作 data(){scrollTop: 0,timer: null,scrollBottom: 0,tim ...

scrollTop以及页面回到顶部

1.实现有许多种方法，原理是监听页面高度实现滚动。

一、使用锚点

二、scrollTop属性:

三、scrollTo(0,0)方法:

scrollTop以及页面回到顶部相关推荐

最新文章

热门文章