快捷導(dǎo)航

常見效果實現(xiàn)之返回頂部(結(jié)合淡入、淡出、減速滾動)

更新時間：2012年01月04日 17:28:53 作者：

返回頂部是經(jīng)常會見到的效果，代碼比較簡單，使用2個對象和一個主函數(shù)。職責(zé)明確方便復(fù)用

在性能方面考慮了由于連續(xù)觸發(fā)onscroll事件，頻繁調(diào)用回調(diào)函數(shù)而產(chǎn)生的性能問題?？梢詫⒒卣{(diào)函數(shù)緩存一段時候后執(zhí)行，即當(dāng)這段時間內(nèi)多次觸發(fā)了onscroll事件，但回調(diào)函數(shù)只會執(zhí)行一次。

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

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>結(jié)合淡入/淡出/減速運動效果實現(xiàn)的返回頂部功能</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 段時間內(nèi)，多次執(zhí)行func。常用 resize、scoll、mousemove等連續(xù)性事件中 
buffer: function(func, ms, context){ 
var buffer; 
return function(){ 
if(buffer) return; 
buffer = setTimeout(function(){ 
func.call(this) 
buffer = undefined; 
},ms); 
}; 
}, 
/*讀取或設(shè)置元素的透明度*/ 
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; 
} 
} 
}, 
//獲取或設(shè)置文檔對象的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相關(guān)問題：
1 opacity: function(elem, val){
　　if(val){//使用這種判斷方式當(dāng)傳0，空字符串時會產(chǎn)生BUG 。
2：document.documentElement.scrollTop chrome取不到值。
3： elem.style.opacity 讀取不到在CSS Class中定義的值。
4：IE6不支持fixed定位，雖然可以使用absolute模擬。不過很有很多網(wǎng)站都它進行了降級處理。

您可能感興趣的文章: