JavaScript实现返回顶部效果

仿淘宝回到顶部效果

需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。

思路：

1、页面加载完毕才能执行js代码

　　可以将js代码写在最下边（本次回顶示例是用的这种）

　　想写在上边可以用下边这两种：

　　 ①window.onload = function() {...}

　　　②window.addEventListener('load', function() {...})

2、获取需要用到的元素

3、绑定滚动事件 scroll

　　当用户滚到banner模块时使侧边栏变为固定状态

1 if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
2     sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
3     sliderbar.style.top = sliderbarTop + 'px'; 
4 } else {
5     sliderbar.style.position = 'absolute';
6     sliderbar.style.top = '300px';
7 }

　　当用户滚到main模块时显示返回顶部按钮

1 if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
2     goBack.style.display = 'block';
3 } else {
4     goBack.style.display = 'none';
5 }

4、绑定点击事件 click

　　点击返回顶部按钮后页面会动态滑到顶部，速度由快到慢向上滑动

1 sliderbar.addEventListener('click', function() {
2     animate(window, 0);
3 })

5、关于动画函数 animate(obj, target, callback)

　　这里obj对象即是window；target目标位置即是0；callback是回调函数，没传参的话就可以忽略

　　设置一个定时器 setInterval();

　　声明一个step作为步长值，值为顶部位置到当前滚动条位置之差除以10（step会越来越小，滚动速度也就越来越慢，实现了滚动条的速度由快到慢的滑上去）

var step = (target - window.pageYOffset) / 10;

　　然而step并不总是整数，当step不是整数时可以让滚动条再往前走一丢丢。滚动条可以上下滑动，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整

step = step > 0 ? Math.ceil(step) : Math.floor(step);

　　window.scroll(x, y) 滚动到文档特定位置，定时器每次调用函数都会往上滑一点

window.scroll(0, window.pageYOffset + step);

　　判断动画是否执行完毕，如果执行完毕则关闭定时器 clearInterval();

1 if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
2     clearInterval(obj.timer);
3     //  判断是否传了回调函数
4     /* if(callback) { 
5         callback();
6     } */
7     // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
8     callback && callback();
9 }

详细代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>返回顶部效果</title>
  8     <style>
  9         .slider-bar {
 10             position: absolute;
 11             left: 47%;
 12             top: 300px;
 13             margin-left: 600px;
 14             width: 45px;
 15             height: 130px;
 16             background-color: pink;
 17             cursor: pointer;
 18         }
 19         .w {
 20             width: 1100px;
 21             margin: 10px auto;
 22         }
 23         .header {
 24             height: 150px;
 25             background-color: purple;
 26         }
 27         .banner {
 28             height: 250px;
 29             background-color: skyblue;
 30         }
 31         .main {
 32             height: 1000px;
 33             background-color: yellowgreen;
 34         }
 35         span {
 36             display: none;
 37             position: absolute;
 38             bottom: 0;
 39         }
 40     </style>
 41 </head>
 42 <body>
 43     <div class="slider-bar">
 44         <span class="goBack">返回顶部</span>
 45     </div>
 46     <div class="header w">头部区域</div>
 47     <div class="banner w">banner区域</div>
 48     <div class="main w">主体部分</div>
 49 
 50     <script>
 51         // querySelector() 方法返回匹配指定选择器（）的第一个元素，传的必须是字符串
 52         var sliderbar = document.querySelector('.slider-bar');
 53         var banner = document.querySelector('.banner');
 54         var bannerTop = banner.offsetTop; // banner模块距离顶部的长度
 55         var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度
 56 
 57         var main = document.querySelector('.main');
 58         var goBack = document.querySelector('.goBack');
 59         var mainTop = main.offsetTop;  // main模块距离顶部的长度
 60         
 61         // scroll 屏幕发生滚动事件时执行
 62         document.addEventListener('scroll', function() {
 63             if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
 64                 sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
 65                 sliderbar.style.top = sliderbarTop + 'px'; 
 66             } else {
 67                 sliderbar.style.position = 'absolute';
 68                 sliderbar.style.top = '300px';
 69             }
 70             
 71             if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
 72                 goBack.style.display = 'block';
 73             } else {
 74                 goBack.style.display = 'none';
 75             }
 76             
 77         });
 78         sliderbar.addEventListener('click', function() {
 79             animate(window, 0);
 80         })
 81 
 82         /* 动画函数：
 83          *  obj 做动画的对象（这里就是指window）
 84          *  target 目标位置（顶部）
 85          *  callback 回调函数（没有传参的话就不执行）
 86          */
 87         function animate(obj, target, callback) {
 88             clearInterval(obj.timer);  // 先清除定时器，保证只有一个定时器在执行，以免出现bug
 89             obj.timer = setInterval(function() {
 90                 // window.pageYOffset距离顶部的距离（是负的）
 91                 var step = (target - window.pageYOffset) / 10;  // step步长（让页面速度逐渐变慢的滑动上去）
 92                 step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整
 93                 if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
 94                     clearInterval(obj.timer);
 95                     //  判断是否传了回调函数
 96                     /* if(callback) { 
 97                         callback();
 98                     } */
 99                     // 可以简写为下边这种。 &&是短路运算符，存在callback（即第一个式子为true）时才会继续执行callback()
100                     callback && callback();
101                 }
102                 // window.scroll(x, y) 滚动到文档特定位置
103                 window.scroll(0, window.pageYOffset + step);
104             }, 15);
105         }
106     </script>
107 </body>
108 </html>

来源：oschina

链接：https://my.oschina.net/u/4295888/blog/3340387

标签

animate

javascript