日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/10 javascript 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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>

總結

以上是生活随笔為你收集整理的JS实现滚动监听以及滑动到顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。