淘寶首頁的回到頂部按鈕是這樣的：下拉到一定距離後按鈕才顯示出來，鼠標放到按鈕上時，按鈕背景會變成灰色，並且圖標變成了文字。點擊按鈕緩慢回到頂部
我們先分析下實現這樣的效果需要添加哪些事件。鼠標移進移出按鈕，按鈕表現發生變化，所以需要給按鈕添加mouseover， mouseout事件。要偵聽滾動條的變化，所以需要給window添加scroll事件，點擊按鈕回到頂部，按鈕添加click事件。我們將事件處理程序封裝成三個函數moveIn, moveOut, goTop;
下面先給出html/css代碼
複製代碼代碼如下:
<div>
<div>頭部</div>
<div>主要內容，高度是2000px</div>
<divbtn">返回頂部</div>
</div>
複製代碼代碼如下:
.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代碼
複製代碼代碼如下:
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"; //修改的是內聯樣式，具有最高的優先級;
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) { //修改參數可調整返回頂部的速度
acceleration = acceleration || 0.1;
time = time || 10;
var speed = 1 + acceleration;
function getScrollTop() { //取得滾動條的豎直距離
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value) { //設置滾動條的豎直距離,實現效果的關鍵就是在很短的間隔時間內不斷地修改滾動條的豎直距離,以實現滾動效果
document.documentElement.scrollTop = value;
document.body.scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { //判斷滾動條距離窗口頂部多遠時顯示出來，這裡是100px
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop(Math.floor(getScrollTop() / speed)); //這行代碼是關鍵，取得滾動條豎直距離，除以speed後再給滾動條設置豎直距離
if (getScrollTop() == 0)
clearInterval(timer);
}, time);
};
}
goTop(0.2, 8);
}, false);
當然，還有其他的實現方法，下面給出其他方法的關鍵代碼
複製代碼代碼如下:
btn.onclick = function() {
clearInterval(timer);
var timer = setInterval(function() {
var now = scrollTop; //滾動條豎直距離
speed = (0 - now) / 10;
speed = Math.floor(speed);
if (now == 0);
clearInterval(timer);
document.documentElement.scrollTop = now + speed; //標準模式下的瀏覽器
document.body.scrollTop = now + speed; //怪異模式下的瀏覽器
}, 15);
}
這裡的代碼主要還是參考了網上其他資源，再加了一點自己的理解。當然還有其他實現方法，比如JavaScript最早時間就支持的window.scrollTo()。用jQ來實現的話代碼量將會變得很少，可參看w3cplus
個人覺得，先學好原生JavaScript，比如搞清楚數據類型，閉包，繼承，作用域，DOM，CSS，事件處理，Ajax等，用熟練後學習其他框架將會容易很多。