Top Taobao imitation effect
Requirements: The display returns to the top of the button when the scroll bar to a certain position sidebar fixed at a certain position, and back down to a certain position. Click on the button slide the top of the page dynamically, speed slides up from fast to slow.
Ideas:
1, pages loaded to perform js code
js code can be written in the most below (in this example this is the top back with)
In the top can be used to write the following two:
①window.onload = function() {...}
②window.addEventListener('load', function() {...})
2, get the elements need to use
3, binding events scroll the scroll
When the user module that the roll banner becomes fixed state sidebar
. 1 IF (window.pageYOffset> = bannerTop) { // window.pageYOffset screen is rolled up from
2 sliderbar.style.position = 'Fixed'; // when the user module that the roll banner becomes fixed state sidebar
. 3 sliderbar.style.top sliderbarTop + = 'PX' ;
. 4 } the else {
. 5 sliderbar.style.position = 'Absolute' ;
. 6 sliderbar.style.top = '300px by' ;
. 7 }
When a user display module main roll Top button
. 1 IF (window.pageYOffset> = MAINTOP) { // when the display button Top user module main roll
2 goBack.style.display = 'Block' ;
. 3 } the else {
. 4 goBack.style.display = 'none' ;
5 }
4, bind click event click
After clicking the button the page will return to the top of the dynamic slide top, slide up speed from fast to slow
1 sliderbar.addEventListener('click', function() {
2 animate(window, 0);
3 })
5, on the animation function animate (obj, target, callback)
Here obj Object that is the window; target destination that is 0; callback is the callback function, did not pass the Senate, then you can ignore
A timer is set the setInterval ();
Declaring a step as the step value, the value of the top position to the current position of the scroll bar difference divided by 10 (step will be getting smaller and smaller, the scroll speed is getting slow to achieve the speed of the scroll bar from fast to slow slip up)
var step = (target - window.pageYOffset) / 10;
But step is not always an integer, when the step is not an integer can make a scroll bar to go any further Diudiu. You can slide up and down the scroll bar, may be greater than zero so the step may be less than zero. Greater than zero rounding up, rounding down is less than zero
step = step > 0 ? Math.ceil(step) : Math.floor(step);
window.scroll (x, y) to scroll to document a specific location, a timer function will be invoked every time a little slip up
window.scroll(0, window.pageYOffset + step);
Determine whether the animation is finished, it is finished if off timer clearInterval ();
. 1 IF (target == window.pageYOffset) { // when the page back to the top of the rear (i.e., animation execution End) Clear Timer
2 the clearInterval (obj.timer);
. 3 // determines whether to pass the callback function
. 4 / * IF ( the callback) {
. 5 the callback ();
. 6 } * /
. 7 // can be shortened to below this. && operator is shorted, there will continue callback callback (i.e. for the first formula to true) ()
. 8 callback && callback ();
. 9 }
Detailed code is as follows:
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>