仿淘寶回到頂部效果
需求：當滾動條到一定位置時側邊欄固定在某個位置，再往下滑動到某一位置時顯示回到頂部按鈕，點擊按鈕后頁面會動態滑到頂部，速度由快到慢向上滑，
思路：
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 >
44 <span >回傳頂部</span>
45 </div>
46 <div >頭部區域</div>
47 <div >banner區域</div>
48 <div >主體部分</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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/167835.html
標籤：JavaScript