JavaScript实现返回顶部效果
程序员文章站
2022-05-18 20:48:35
仿淘宝回到顶部效果 需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。 思路： 1、页面加载完毕才能执行js代码 可以将js代码写在最下边（本次回顶示例是用的这种） 想写在上边可以用下边这两种： ①window. ......
仿淘宝回到顶部效果
需求：当滚动条到一定位置时侧边栏固定在某个位置，再往下滑动到某一位置时显示回到顶部按钮。点击按钮后页面会动态滑到顶部，速度由快到慢向上滑。
思路：
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>