溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript怎么實現點擊回到頂部效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript怎么實現點擊回到頂部效果”吧！
需求：當滾動條到一定位置時側邊欄固定在某個位置，再往下滑動到某一位置時顯示回到頂部按鈕。點擊按鈕后頁面會動態滑到頂部，速度由快到慢向上滑。
思路：
1、頁面加載完畢才能執行js代碼
可以將js代碼寫在最下邊（本次回頂示例是用的這種）
想寫在上邊可以用下邊這兩種：
①window.onload = function() {...}
②window.addEventListener('load', function() {...})
2、獲取需要用到的元素
3、綁定滾動事件 scroll
當用戶滾到banner模塊時使側邊欄變為固定狀態
if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滾上去的距離 sliderbar.style.position = 'fixed'; // 當用戶滾到banner模塊時使側邊欄變為固定狀態 sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px';}當用戶滾到main模塊時顯示返回頂部按鈕
if(window.pageYOffset >= mainTop) { // 當用戶滾到main模塊時顯示返回頂部按鈕 goBack.style.display = 'block'; } else { goBack.style.display = 'none'; }4、綁定點擊事件 click
點擊返回頂部按鈕后頁面會動態滑到頂部，速度由快到慢向上滑動
sliderbar.addEventListener('click', function() { animate(window, 0); })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();
if(window.pageYOffset == target) { // 當頁面回到頂部后(即動畫執行完) 清除定時器 clearInterval(obj.timer); // 判斷是否傳了回調函數 /* if(callback) { callback(); } */ // 可以簡寫為下邊這種。 &&是短路運算符，存在callback（即第一個式子為true）時才會繼續執行callback() callback && callback();}詳細代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>返回頂部效果</title> <style> .slider-bar { position: absolute; left: 47%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; cursor: pointer; } .w { width: 1100px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style></head><body> <div> <span>返回頂部</span> </div> <div class="header w">頭部區域</div> <div class="banner w">banner區域</div> <div class="main w">主體部分</div> <script> // querySelector() 方法返回匹配指定選擇器（）的第一個元素，傳的必須是字符串 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); var bannerTop = banner.offsetTop; // banner模塊距離頂部的長度 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 側邊欄固定后距離頂部的長度 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // main模塊距離頂部的長度 // scroll 屏幕發生滾動事件時執行 document.addEventListener('scroll', function() { if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滾上去的距離 sliderbar.style.position = 'fixed'; // 當用戶滾到banner模塊時使側邊欄變為固定狀態 sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } if(window.pageYOffset >= mainTop) { // 當用戶滾到main模塊時顯示返回頂部按鈕 goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }); sliderbar.addEventListener('click', function() { animate(window, 0); }) /* 動畫函數： * obj 做動畫的對象（這里就是指window） * target 目標位置（頂部） * callback 回調函數（沒有傳參的話就不執行） */ function animate(obj, target, callback) { clearInterval(obj.timer); // 先清除定時器，保證只有一個定時器在執行，以免出現bug obj.timer = setInterval(function() { // window.pageYOffset距離頂部的距離（是負的） var step = (target - window.pageYOffset) / 10; // step步長（讓頁面速度逐漸變慢的滑動上去） step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不總是整數。大于零向上取整,小于零向下取整 if(window.pageYOffset == target) { // 當頁面回到頂部后(即動畫執行完) 清除定時器 clearInterval(obj.timer); // 判斷是否傳了回調函數 /* if(callback) { callback(); } */ // 可以簡寫為下邊這種。 &&是短路運算符，存在callback（即第一個式子為true）時才會繼續執行callback() callback && callback(); } // window.scroll(x, y) 滾動到文檔特定位置 window.scroll(0, window.pageYOffset + step); }, 15); } </script></body></html>感謝各位的閱讀，以上就是“JavaScript怎么實現點擊回到頂部效果”的內容了，經過本文的學習后，相信大家對JavaScript怎么實現點擊回到頂部效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
