BB’s Blog:本博近期关注 中国移动、电影、电视、手机软件.
“回到顶部”模块的设计

我对“回到顶部”这一模块进行了两部分设计:

一、将“回到顶部”固定在下拉框中间;
方法
在模版顶部添加<div id="top"></div>给予定位,然后在模版中增加下列源码(在IE6下无法显示,所以我还在页面底部加了个“回到顶部”)

<div align="center"><a id="toTop" href="#top" title="回到顶部" class="internal" rel="nofollow"><span>&uarr;</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>

本文信息

» 跟踪本文: 手机WAP
» 发表日期:2007年05月02日 4:15 PM
» 分类: 部件 Parts
» 作者:bb
» 本文链接:http://bblog.biz/movabletype/_parts/totop.htmlEDIT
» 本文引用地址:本文不允许引用
» 本站留言支持:html标签、coCommentgravatar
» 书签:Add to 365KeyAdd to del.icio.us百度搜藏Add to Yahoo
» 现有评论:-、现有引用:-
» 评论审核:直接点击“我要回复”评论文章,需要管理员验证后才能显示,感谢你的回复.

评论(-)

本文不允许评论

引用(-)

本文不允许引用

我要回复

昵称:   记住我的用户信息:
邮件:   Subscribe to This Entry:
主页:
Very Happy Smile Sad Surprised Shocked Confused Cool Laughing Mad Razz Embarassed Crying or Very Sad Evil or Very Mad Twisted Evil Rolling Eyes Wink
Short Cuts
Search my Blog
Subscribe This Entry
  • Enter your Email address:
Archives
Vote
评价本文:
Category Entries