我对“回到顶部”这一模块进行了两部分设计：
一、将“回到顶部”固定在下拉框中间；
方法
在模版顶部添加<div id="top"></div>给予定位，然后在模版中增加下列源码(在IE6下无法显示，所以我还在页面底部加了个“回到顶部”)
<div align="center"><a id="toTop" href="#top" title="回到顶部" class="internal" rel="nofollow"><span>↑</span></a></div>
在css 中添加
#toTop {
width:26px;
height:26px;
display:block;
position:fixed;
bottom:50%;
right:5px;
background:url(<$MTBlogURL$>styles/milk/pager_home.gif) no-repeat 0 0;
outline:0 none;
}
#toTop span {
display:none;
}
二、在回到顶部过程中使用逐步上升的JS。
在<head></head>中添加下列JS
<script type="text/javascript">
toTop = {
init:function(){
document.getElementById("toTop").onclick=function(e){
toTop.set();
return false;
}
},
waitTimer:null,
set:function(){
var d_st=document.documentElement.scrollTop;
if(window.navigator.userAgent.indexOf("MSIE")>=1){
for (var i=d_st; i>10; i-=Math.floor(i/6)){
window.scrollTo(0,i);
}
window.scrollTo(0,10);
}
else{
window.scrollTo(0,Math.floor(d_st / 2));
if(d_st>10){
waitTimer=setTimeout("toTop.set()",40);
}
else{
clearTimeout(waitTimer);
}
}
}
}
window.onload = function(){toTop.init();}
</script>
Add a Reply