JS实现滚动监听以及滑动到顶部

效果图:
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> --><meta name="viewport" content="width=device-width, user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>JS实现滚动监听以及滑动到顶部</title><script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script><script>eruda.init();</script></head><body><style>body {margin: 0;background-color: rgba(0, 0, 255, 0.1);height: 200vh;}.uptop {position: fixed;bottom: -50px;right: 10px;width: 50px;z-index: 99;background: rgba(0, 0, 0, 0.2);text-align: center;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}.uptop img {width: 80%;cursor: pointer;}</style><div class="uptop" id="uptop"><!-- 这里用了一个向上的箭头图片，用于表明返回顶部 --><img src="img/up_to_top.png" id="to-top" /></div><script>// 使用touchstart和touched封装了一个移动端的tap事件var idcast = {// 传入dom元素tap: function(dom, callback) {//判断是否传入了dom元素,或者dom元素是否是一个对象if (!dom || typeof dom != "object") {return;}var startX, startY, time, moveX, moveY, distanceX, distanceY;dom.addEventListener("touchstart", function(e) {if (e.targetTouches.length > 1) {return;}startX = e.targetTouches[0].clientX;startY = e.targetTouches[0].clientY;time = Date.now();});dom.addEventListener("touchend", function(e) {if (e.changedTouches.length > 1) {//说明不止一个手指return;}//判断时间差异if (Date.now() - time > 150) {console.log("长按操作");return;}//获取松开手指的时候的坐标与触摸开始时的坐标差异moveX = e.changedTouches[0].clientX;moveY = e.changedTouches[0].clientY;distanceX = moveX - startX;distanceY = moveY - startY;//判断坐标差异if (Math.abs(distanceX) < 6 && Math.abs(distanceY) < 6) {//说明是点击而非滑动//执行tap事件相应之后的处理操作//若函数不为空才调用callback && callback(e);console.log("移动端点击单击事件--tap事件");} else {console.log("滑动操作");}});}};window.onscroll = function() {var t = document.documentElement.scrollTop || document.body.scrollTop; //获取距离页面顶部的距离var uptop = document.getElementById("uptop"); //获取div元素if (t >= 300) {//当距离顶部超过300px时uptop.style.bottom = 30 + "px"; //使div距离底部30px，也就是向上出现} else {//如果距离顶部小于300pxuptop.style.bottom = -50 + "px"; //使div向下隐藏}};var top = document.getElementById("to-top"); //获取图片元素var timer = null;// 方式1(推介): 解决了移动端click延迟300ms触发问题idcast.tap(top, function(e) {//点击图片时触发点击事件timer = setInterval(function() {// 设置一个计时器var ct =document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离ct -= 10;if (ct > 0) {//如果与顶部的距离大于零window.scrollTo(0, ct); //向上移动10px} else {//如果距离小于等于零window.scrollTo(0, 0); //移动到顶部clearInterval(timer); //清除计时器}}, 10); //隔10ms执行一次前面的function，展现一种平滑滑动效果});// 方式2: IOS微信端打开时 无法触发click事件// top.onclick = function() {//   //点击图片时触发点击事件//   timer = setInterval(function() {//     // 设置一个计时器//     var ct =//       document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离//     console.log(ct);//     ct -= 10;//     if (ct > 0) {//       //如果与顶部的距离大于零//       window.scrollTo(0, ct); //向上移动10px//     } else {//       //如果距离小于等于零//       window.scrollTo(0, 0); //移动到顶部//       clearInterval(timer); //清除计时器//     }//   }, 10); //隔10ms执行一次前面的function，展现一种平滑滑动效果// };</script></body>
</html>