效果:(图片已删,可自行添加) 此处运用了滚动条时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .bg { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 2000px; background-color: rgb(122, 232, 223); } .bg .yanse { width: 100%; height: 200px; text-align: center; background-color: rgb(81, 151, 192); } .bg #dh { height: 100px; line-height: 100px; background-color: rgb(164, 199, 209); } #go { position: fixed; right: 20px; top: 80%; width: 80px; height: 60px; line-height: 60px; text-align: center; border-radius: 25px; background-color: rgb(91, 139, 198); } </style> </head> <body> <div class="bg"> <div id="dh" class="yanse">导航</div> <div class="yanse"></div> <div class="yanse"></div> <div class="yanse"></div> <div class="yanse"></div> <div class="yanse"></div> <div class="yanse"></div> </div> <button id="go">回到顶部</button> </body> <script> // 顶部吸顶(定位)内容 var _dh = document.getElementById("dh"); var gdsz1; window.onscroll = function () { //给window(浏览器)添加滚动条事件 gdsz1 = document.documentElement.scrollTop; // 要在函数内部赋值才可用 // console.log(gdsz1); if (gdsz1 >= 100) { //添加固定定位条件 100为设置的导航高度 _dh.style.position = "fixed"; _dh.style.top = "0px"; _dh.style.left = "0px"; } else { _dh.style.position = ""; } }; // 返回顶部内容 //滚动条要配合计时器使用才可达到效果 var _go = document.getElementById("go"); //先获取元素 // console.log(_go); var gdsz2; //将页面滚动条距离顶部高度的数值赋值给变量“滚动数值:gdsz” 要在函数内部赋值才可用 // console.log(gdsz2);//查看是否成功 var timer2 = null; //声明计时器 _go.onclick = function () {//为元素添加事件 clearInterval(timer2); //先清除计时器再开启 防止多次点击多个计时器叠加 timer2 = setInterval(function () { document.documentElement.scrollTop -= 20; //高度值每次减少数值 累减 gdsz2 = document.documentElement.scrollTop; // 要在函数内部赋值才可用 // console.log(gdsz2); if (gdsz2 <= 0) { //计时器停止条件 clearInterval(timer2); } }, 10); }; </script> </html>