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