【第三期】根据51CTO的返回顶部按钮重写的实现返回顶部的实现效果

首先感谢 @lflianglan给我代码,让我灵光一闪(img是用firebug找到51CTO的,直接就用了,大家可以自行替换)。那么开始了:

1.body区域:

<div style="display: none" title="返回顶部" id="goTopBtn"><img border=0 src=\'#\'" /tops.jpg" alt=""></div>

   <script type="text/javascript">goTopEx();</script>

2.head区域:

<link href="css/fydb.css" rel="stylesheet" type="text/css" />

   <script src=\'#\'" /scrolltop.js" type="text/javascript"></script>

3.fydb.css代码:

body {
    height:auto;
}
#goTopBtn {
    position: fixed;
    text-align: center;
    line-height: 30px;
    width: 30px;
    bottom: 35px;
    height: 33px;
    font-size: 12px;
    cursor: pointer;
     right: 100px;
     _position: absolute;
     _right: auto
}

4.scrolltop.js代码:

// JavaScript Document
function goTopEx(){
var obj=document.getElementById("goTopBtn");
function getScrollTop(){
return document.documentElement.scrollTop+document.body.scrollTop;
}
function setScrollTop(value){
if(document.documentElement.scrollTop){
document.documentElement.scrollTop=value;
}else{
document.body.scrollTop=value;
}
}
window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
obj. goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}

完毕,有疑问的请留言,不完善的地方希望大神批评指正。

你可能感兴趣的:(js,css,position,返回顶部,center)