欢迎光临
我的个人博客网站

JavaScript 返回顶部效果


代码实现:

<!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>         .slider-bar {             position: absolute;             left: 50%;             top: 300px;             margin-left: 600px;             width: 45px;             height: 130px;             background-color: pink;         }                  .w {             width: 1200px;             margin: 10px auto;         }                  .header {             height: 150px;             background-color: purple;         }                  .banner {             height: 250px;             background-color: skyblue;         }                  .main {             height: 1000px;             background-color: yellowgreen;         }                  span {             display: none;             position: absolute;             bottom: 0;         }                  .goBack {             cursor: pointer;         }     </style> </head>  <body>     <div class="slider-bar">         <span class="goBack">返回顶部</span>     </div>     <div class="header w">头部区域</div>     <div class="banner w">banner区域</div>     <div class="main w">主体部分</div>     <script>         //1. 获取元素         var sliderbar = document.querySelector('.slider-bar');         var banner = document.querySelector('.banner');         // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面         var bannerTop = banner.offsetTop             // 当我们侧边栏固定定位之后应该变化的数值         var sliderbarTop = sliderbar.offsetTop - bannerTop;         // 获取main 主体元素         var main = document.querySelector('.main');         var goBack = document.querySelector('.goBack');         var mainTop = main.offsetTop;         // 2. 页面滚动事件 scroll         document.addEventListener('scroll', function() {             // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位             if (window.pageYOffset >= bannerTop) {                 sliderbar.style.position = 'fixed';                 sliderbar.style.top = sliderbarTop + 'px';             } else {                 sliderbar.style.position = 'absolute';                 sliderbar.style.top = '300px';             }             // 4. 当我们页面滚动到main盒子,就显示 goback模块             if (window.pageYOffset >= mainTop) {                 goBack.style.display = 'block';             } else {                 goBack.style.display = 'none';             }         });          // 3. 当我们点击了返回顶部模块,就让窗口滚动的页面的最上方         goBack.addEventListener('click', function() {             // 里面的x和y 不跟单位的 直接写数字即可             // window.scroll(0, 0);             // 因为是窗口滚动 所以对象是window             animate(window, 0, 5);         });          function animate(obj, target, time, callback) {             // 先清除以前的定时器,只保留当前的一个定时器执行             clearInterval(obj.timer);             obj.timer = setInterval(function() {                 // 步长值写到定时器的里面,并设置为整数                 var step = (target - window.pageYOffset) / 10;                 step = step > 0 ? Math.ceil(step) : Math.floor(step);                 if (window.pageYOffset == target) {                     clearInterval(obj.timer);                     // 回调函数写到定时器结束里面                     callback && callback();                 }                 // obj.style.left = window.pageYOffset + step + 'px';                 window.scroll(0, window.pageYOffset + step);             }, time);         }     </script> </body>  </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript 返回顶部效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏