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>
上一篇: Gradle 插件
下一篇: 一个刚入行的BIOS工程师的自我简介