在性能方面考慮了由於連續觸發onscroll事件，頻繁調用回調函數而產生的性能問題。可以將回調函數緩存一段時候後執行，即當這段時間內多次觸發了onscroll事件，但回調函數只會執行一次。
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>結合淡入/淡出/減速運動效果實現的返回頂部功能</title>
<style>
.fixed{
position:fixed; bottom:100px; width:20px; right:100px; height:80px; font-size:12px;
cursor:pointer; background-color:#ccc; opacity:0; filter: alpha(opacity=0);
}
.placeholder{ height:2000px;}
</style>
</head>
<body>
<div id="gotop" class="fixed">
返回頂部
</div>
<script>
var tool = {
//此方法為了避免在 ms 段時間內，多次執行func。常用 resize、scoll、mousemove等連續性事件中
buffer: function(func, ms, context){
var buffer;
return function(){
if(buffer) return;
buffer = setTimeout(function(){
func.call(this)
buffer = undefined;
},ms);
};
},
/*讀取或設置元素的透明度*/
opacity: function(elem, val){
var setting = arguments.length > 1;
if("opacity" in elem.style){//elem.style["opacity"] 讀取不到CSS class中的值
return setting ? elem.style["opacity"] = val : elem.style["opacity"];
}else{
if(elem.filters && elem.filters.alpha) {
return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100;
}
}
},
//獲取或設置文檔對象的scrollTop
//function([val])
documentScrollTop: function(val){
var elem = document;
return (val!== undefined) ?
elem.documentElement.scrollTop = elem.body.scrollTop = val :
Math.max(elem.documentElement.scrollTop, elem.body.scrollTop);
}
};
//動畫效果
var effect = {
//淡入
fadein: function (elem){
var val = 0;
var interval = 25;
setTimeout(function(){
val += 0.1;
if(val>1){
tool.opacity(elem, 1)
return;
}else {
tool.opacity(elem, val)
setTimeout(arguments.callee, interval);
}
},interval);
},
//淡出
fadeout: function (elem){
var val = 1;
var interval = 25;
setTimeout(function(){
val -= 0.1;
if(val < 0){
tool.opacity(elem, 0)
return;
}else {
tool.opacity(elem,val) ;
setTimeout(arguments.callee, interval);
}
},interval);
},
//減速移動滾動條
move: function(scrollTop){
setTimeout(function(){
scrollTop = Math.floor((scrollTop * 0.65));
tool.documentScrollTop(scrollTop);
if(scrollTop !=0 ){
setTimeout(arguments.callee, 25);
}
},25);
}
};
//主程序
(function(){//gotop
var visible = false;
var elem = document.getElementById("gotop");
function onscroll(){
var scrollTop = tool.documentScrollTop();
if(scrollTop > 0){
if(!visible){
effect.fadein(elem)
visible = true;
}
}else{
if(visible){
effect.fadeout(elem);
visible = false;
}
}
}
function onclick(){
var scrollTop = tool.documentScrollTop();
effect.move(scrollTop);
}
elem.onclick = onclick;
window.onscroll = tool.buffer(onscroll, 200, this);
})();
</script>
<div class="placeholder">placeholder</div>
</body>
</html>
兼容性和bugs相關問題：
1 opacity: function(elem, val){
if(val){//使用這種判斷方式當傳0，空字符串時會產生BUG 。
2：document.documentElement.scrollTop chrome取不到值 。
3： elem.style.opacity 讀取不到在CSS Class中定義的值。
4：IE6不支持fixed定位，雖然可以使用absolute模擬。不過很有很多網站都它進行了降級處理。