站長資訊網(wǎng)本篇文章給大家?guī)淼膬?nèi)容是JavaScript仿淘寶回到頂部效果（代碼示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
需求：當滾動條到一定位置時側邊欄固定在某個位置，再往下滑動到某一位置時顯示回到頂部按鈕。點擊按鈕后頁面會動態(tài)滑到頂部，速度由快到慢向上滑。
思路：
1、頁面加載完畢才能執(zhí)行js代碼
可以將js代碼寫在最下邊（本次回頂示例是用的這種）
想寫在上邊可以用下邊這兩種：
①window.onload = function() {…}
?、趙indow.addEventListener('load', function() {…})
2、獲取需要用到的元素
3、綁定滾動事件 scroll
當用戶滾到banner模塊時使側邊欄變?yōu)楣潭顟B(tài)
if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滾上去的距離 sliderbar.style.position = 'fixed'; // 當用戶滾到banner模塊時使側邊欄變?yōu)楣潭顟B(tài) 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
點擊返回頂部按鈕后頁面會動態(tài)滑到頂部，速度由快到慢向上滑動
sliderbar.addEventListener('click', function() { animate(window, 0); })
5、關于動畫函數(shù) animate(obj, target, callback)
這里obj對象即是window；target目標位置即是0；callback是回調函數(shù)，沒傳參的話就可以忽略
設置一個定時器 setInterval();
聲明一個step作為步長值，值為頂部位置到當前滾動條位置之差除以10（step會越來越小，滾動速度也就越來越慢，實現(xiàn)了滾動條的速度由快到慢的滑上去）
var step = (target - window.pageYOffset) / 10;
然而step并不總是整數(shù)，當step不是整數(shù)時可以讓滾動條再往前走一丟丟。滾動條可以上下滑動，所以step可能大于零也可能小于零。大于零向上取整,小于零向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
window.scroll(x, y) 滾動到文檔特定位置，定時器每次調用函數(shù)都會往上滑一點
window.scroll(0, window.pageYOffset + step);
判斷動畫是否執(zhí)行完畢，如果執(zhí)行完畢則關閉定時器 clearInterval();
if(window.pageYOffset == target) { // 當頁面回到頂部后(即動畫執(zhí)行完) 清除定時器 clearInterval(obj.timer); // 判斷是否傳了回調函數(shù) /* if(callback) { callback(); } */ // 可以簡寫為下邊這種。 &&是短路運算符，存在callback（即第一個式子為true）時才會繼續(xù)執(zhí)行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">頭部區(qū)域</div> <div class="banner w">banner區(qū)域</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 屏幕發(fā)生滾動事件時執(zhí)行 document.addEventListener('scroll', function() { if(window.pageYOffset >= bannerTop) { // window.pageYOffset 屏幕被滾上去的距離 sliderbar.style.position = 'fixed'; // 當用戶滾到banner模塊時使側邊欄變?yōu)楣潭顟B(tài) 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); }) /* 動畫函數(shù)： * obj 做動畫的對象（這里就是指window） * target 目標位置（頂部） * callback 回調函數(shù)（沒有傳參的話就不執(zhí)行） */ function animate(obj, target, callback) { clearInterval(obj.timer); // 先清除定時器，保證只有一個定時器在執(zhí)行，以免出現(xiàn)bug obj.timer = setInterval(function() { // window.pageYOffset距離頂部的距離（是負的） var step = (target - window.pageYOffset) / 10; // step步長（讓頁面速度逐漸變慢的滑動上去） step = step > 0 ? Math.ceil(step) : Math.floor(step); // step并不總是整數(shù)。大于零向上取整,小于零向下取整 if(window.pageYOffset == target) { // 當頁面回到頂部后(即動畫執(zhí)行完) 清除定時器 clearInterval(obj.timer); // 判斷是否傳了回調函數(shù) /* if(callback) { callback(); } */ // 可以簡寫為下邊這種。 &&是短路運算符，存在callback（即第一個式子為true）時才會繼續(xù)執(zhí)行callback() callback && callback(); } // window.scroll(x, y) 滾動到文檔特定位置 window.scroll(0, window.pageYOffset + step); }, 15); } </script> </body> </html>
