点击返回页面顶部（h5、js、jQuery 三种方式）

2024-05-23 22:58| 来源: 网络整理| 查看: 265

当页面过长时，通常会在滚动条到一定位置时设置按钮，点击可以快速返回顶部或者指定的位置处。

参考文档：jQuery中页面返回顶部的方法总结

方法一：锚点定位

当点击a标签，会直接返回到顶部；如果p标签有id属性值，a标签href设置为该p标签的id属性值，则点击该a标签可以跳到此p标签处。

//p*40{$} 回车可以自动形成p标签，innerHTML为1~40。 1 2 . . . 12 . . . 40 返回顶部返回指定id处

这种方法设置方便，但缺点是会刷新页面。在这里插入图片描述

方法二：window.scrollTo(x,y)

下面这种方法也很方便，并且不会刷新页面，缺点是没有滚动效果。

返回顶部

scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标. 比如我设置scrollTo(100,100)，就是让滚动内容的坐标（100,100）的点处在视口的左上角。

在这里插入图片描述

方法三：设置带有动画效果的滚动回顶部 1、js方法

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

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

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; } 1 2 . . . 12 . . . 40 back to top 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); }

在这里插入图片描述这种方法优点是有了动画效果，只是实现起来比较麻烦，下面介绍一下jQuery方法。

2、jQuery方法 $(function () { $("#toTop").hide();//一开始隐藏掉div $(window).scroll(function () { //console.log("scollTop：", $(this).scrollTop());//这个 this-->window 滚动条距离顶部的距离 //console.log("height：", $(this).height());//窗口可视高度 // if ($(window).scrollTop() > 50) {//判断条件1：设置如果滚动条距离顶部大于50px时，#toTop出现 if ($(this).scrollTop() >= $(this).height()) {//判断条件2：如果滚动条滚动的实际高度>=窗口可视高度，则#toTop出现 $("#toTop").fadeIn(500);//淡入，设置渐变时间持续0.5秒 } else { $("#toTop").fadeOut(500);//淡出 } }) // 点击div，返回顶部 $("#toTop").click(function () { // $(window).scrollTop(0);//直接这样没有滚动效果 // 采用动画的形式，让整个文档网上滑动 $("body,html").animate({ //html是最外层标签，可以代表整个页面；body 是它二级标签，可以用它代表页面的文档部分 // "body,html"都写上，兼容多浏览器 scrollTop: 0 }, 500);//500是滚动到顶部所需要的时间0.5秒 }) })

在这里插入图片描述

返回顶部的div一开始被隐藏，然后做一个操作：判断何时显示div。

本文提出两种，一种是设定固定高度，滚动下来的实际高度距离顶部的距离>50时，显示div；另一种是跟窗口可视高度进行比较，如果滚动条滚动的实际高度>=窗口可视高度，则显示div。

还需要注意的是，在jQuery中，$(window).scrollTop()代表窗口滚动条滚动下来的实际高度；$(window).height()代表此时窗口可视高度（窗口大小改变比如缩小，窗口可视高度随之改变）。

整体可以看出，使用jQuery代码简练，而且动画效果比较流畅。

这里需要注意设置animate方法时使用的是jQuery封装的body或html对象而不是window对象，因为我们要设置body或html的scrollTop属性。

jQuery的方法更适合大多数场景。

以上就是目前整理到的三种方法。

【本文地址】

公司简介

联系我们