快捷導(dǎo)航

原生js實(shí)現(xiàn)淘寶首頁點(diǎn)擊按鈕緩慢回到頂部效果

更新時(shí)間：2014年04月06日 17:28:15 作者：

本例將實(shí)現(xiàn)這樣的一個(gè)效果：下拉到一定距離后按鈕才顯示出來，鼠標(biāo)放到按鈕上時(shí)，按鈕背景會(huì)變成灰色，并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部

淘寶首頁的回到頂部按鈕是這樣的：下拉到一定距離后按鈕才顯示出來，鼠標(biāo)放到按鈕上時(shí)，按鈕背景會(huì)變成灰色，并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部

我們先分析下實(shí)現(xiàn)這樣的效果需要添加哪些事件。鼠標(biāo)移進(jìn)移出按鈕，按鈕表現(xiàn)發(fā)生變化，所以需要給按鈕添加mouseover， mouseout事件。要偵聽滾動(dòng)條的變化，所以需要給window添加scroll事件，點(diǎn)擊按鈕回到頂部，按鈕添加click事件。我們將事件處理程序封裝成三個(gè)函數(shù)moveIn, moveOut, goTop;

下面先給出html/css代碼

復(fù)制代碼代碼如下:

 
<div class="container"> 
<div class="header">頭部</div> 
<div class="content">主要內(nèi)容，高度是2000px</div> 
<div class="footer>底部</div> 
<div id="btn">返回頂部</div> 
</div> 

復(fù)制代碼代碼如下:

 
.container { width: 980px; margin: 0 auto; height: auto; background: #aaa;} 
.content { height: 2000px; border: 1px solid blue; } 
#btn { 
position:fixed; 
bottom: 50px; 
right: 0; 
width: 54px; 
height: 55px; 
background: url(icons.png) no-repeat 0 -110px; } //背景圖可隨意找一張 
font-size: 12px; 
line-height: 55px; 
text-align: center; 
text-indent: -9999em; 
cursor: pointer; 
display: none; 

下面是完整的js代碼

復(fù)制代碼代碼如下:

 
window.addEventListener("load",function() { 
var btn = document.getElementById("btn"); 
btn.addEventListener("mouseover",moveIn, false); 
btn.addEventListener("mouseout", moveOut, false); 

function moveIn() { 
btn.style.color = "#ffffff"; //修改的是內(nèi)聯(lián)樣式，具有最高的優(yōu)先級(jí); 
btn.style.textIndent = "0em"; 
btn.style.backgroundImage = "none"; 
btn.style.backgroundColor = "#FF4401"; 
} 
function moveOut() { 
btn.style.textIndent = "-9999em"; 
btn.style.backgroundImage = "url(icons.png)"; 
} 

function goTop(acceleration, time) { //修改參數(shù)可調(diào)整返回頂部的速度 
acceleration = acceleration || 0.1; 
time = time || 10; 
var speed = 1 + acceleration; 
function getScrollTop() { //取得滾動(dòng)條的豎直距離 
return document.documentElement.scrollTop || document.body.scrollTop; 
} 
function setScrollTop(value) { //設(shè)置滾動(dòng)條的豎直距離,實(shí)現(xiàn)效果的關(guān)鍵就是在很短的間隔時(shí)間內(nèi)不斷地修改滾動(dòng)條的豎直距離,以實(shí)現(xiàn)滾動(dòng)效果 
document.documentElement.scrollTop = value; 
document.body.scrollTop = value; 
} 
window.onscroll = function() { 
var scrollTop = getScrollTop(); 
if (scrollTop > 100) { //判斷滾動(dòng)條距離窗口頂部多遠(yuǎn)時(shí)顯示出來，這里是100px 
btn.style.display = "block"; 
} else { 
btn.style.display = "none"; 
} 
}; 
btn.onclick = function () { 
var timer = setInterval(function() { 
setScrollTop(Math.floor(getScrollTop() / speed)); //這行代碼是關(guān)鍵，取得滾動(dòng)條豎直距離，除以speed后再給滾動(dòng)條設(shè)置豎直距離 
if (getScrollTop() == 0) 
clearInterval(timer); 
}, time); 
}; 
} 
goTop(0.2, 8); 
}, false); 

當(dāng)然，還有其他的實(shí)現(xiàn)方法，下面給出其他方法的關(guān)鍵代碼

復(fù)制代碼代碼如下:

 
btn.onclick = function() { 
clearInterval(timer); 
var timer = setInterval(function() { 
var now = scrollTop; //滾動(dòng)條豎直距離 
speed = (0 - now) / 10; 
speed = Math.floor(speed); 
if (now == 0); 
clearInterval(timer); 
document.documentElement.scrollTop = now + speed; //標(biāo)準(zhǔn)模式下的瀏覽器 
document.body.scrollTop = now + speed; //怪異模式下的瀏覽器 
}, 15); 
} 

這里的代碼主要還是參考了網(wǎng)上其他資源，再加了一點(diǎn)自己的理解。當(dāng)然還有其他實(shí)現(xiàn)方法，比如JavaScript最早時(shí)間就支持的window.scrollTo()。用jQ來實(shí)現(xiàn)的話代碼量將會(huì)變得很少，可參看w3cplus

個(gè)人覺得，先學(xué)好原生JavaScript，比如搞清楚數(shù)據(jù)類型，閉包，繼承，作用域，DOM，CSS，事件處理，Ajax等，用熟練后學(xué)習(xí)其他框架將會(huì)容易很多。

您可能感興趣的文章: