javascript页面返回顶部吸顶效果,导航栏吸顶,缓慢返回顶部,

mac2024-10-28 12

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{margin: 0; padding: 0;} html,body{height: 6000px; width: 100%;} .logo{ width: 100%; height: 100px; background: palevioletred; } .toubu{ margin: 0 auto; width: 1256px; height: 48px; border-bottom: 2px solid red; opacity: 1; top: 300px; } .toubu .nav{ margin: 0 auto; width: 986px; height: 48px; display: flex; /* justify-content: space-between; */ align-items: center; background: #FFF; border: 1px solid red; } .toubu .nav .left{ width: 100px; height: 30px; margin-left: 16px; background:url(logo1.png) no-repeat center center; background-size: 100% 100%; } .toubu .nav .center{ width: 486px; height: 34px; background: #e2231a; margin-left: 106px; display: flex; justify-content: space-between; align-items: center; } .toubu .nav .center form{ margin-left: 2px; width: 425px; height: 30px; background: #fff; } .toubu .nav .center input{ width: 425px; height: 30px; border: none; background: url(xj.png) no-repeat 380px center; } .toubu .nav .center #sub{ background: #e2231a; background: url(fdj.png) no-repeat center center; } .toubu .nav .right{ width: 130px; height: 32px; border: 1px solid rosybrown; background:pink; margin-left: 18px; background:url(gwc.png) no-repeat 18px center; } .toubu .nav .right p{ font-size: 12px; text-align: center; line-height: 32px; margin-left: 50px; } .ret{ width: 50px; height: 50px; background: #008000; font-size: 32px; color: #F1F1F1; text-align: center; line-height: 50px; position: fixed; right: 20px; bottom: 20px; opacity: 0; } </style> </head> <body> <div class="logo"></div> <div class="toubu"> <div class="nav"> <div class="left"></div> <div class="center"> <form action="" method=""> <input type="text" name="" id="" value="矿泉水" /> </form> <input type="button" name="" id="sub" value="" /> </div> <div class="right"> <p>我的购物车</p> </div> </div> </div> <div class="ret"> <bottom>^</bottom> </div> <script type="text/javascript"> //通过函数封装获取元素 function $(id){ return document.querySelector(id) } var toubu = $(".toubu") var ret = $(".ret") //绑定浏览器页面滚动事件,触发函数执行 onscroll =function(){ //浏览器滚动事件兼容写法 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //判断条件当浏览器页面大于100的时候 ,执行吸顶效果,固定 if(scrollTop>100){ toubu.style.position="fixed"; //固定在top:0 toubu.style.top="0" //过度2s toubu.style.transition="all 2s" //浏览器页面大于100的时候,出现返回顶部的按钮 ret.style.opacity="1" ret.style.transition="all 2s" }else{ //若小于100,那么久执行以下代码 toubu.style.opacity="1" ret.style.opacity="0" toubu.style.top="100px" } } //判断点击事件,触发返回顶部效果 ret.onclick=function(){ //开启定时器,执行函数里面的条件语句 time= setInterval(function(){ //浏览器滚动事件兼容写法 var topp = document.documentElement.scrollTop || document.body.scrollTop; //怕判断当浏览器页面大于0 的时候,点击按钮是页面返回顶部 if(topp > 0){ //在定时器执行一次的时候(定时器设置的是0.0003秒一次) 让页面减30.,循环,从而使得页面缓慢返回顶部,不会突然跳到顶部..... document.documentElement.scrollTop -=30 }else{ document.body.scrollTop -=30 } // console.log(topp) // console.log("执行了从"+topp) //当页面高度为0 的时候,关闭定时器 if(topp == 0){ clearInterval(time) } },30) } </script> </body> </html>

最新回复(0)