JS代碼如下:
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" >< /script>
< script type = "text/javascript" >
backTop = function ( btnId ){
var btn = document . getElementById( btnId);
var d = document . documentElement;
window . onscroll = set;
btn . onclick = function (){
btn . style . display = "none";
window . onscroll = null;
this . timer = setInterval( function (){
d . scrollTop -= Math . ceil( d . scrollTop * 0.1);
if( d . scrollTop == 0) clearInterval( btn . timer , window . onscroll = set);
}, 10);
};
function set (){ btn . style . display = d . scrollTop ? 'block' : "none" }
};
backTop( 'gotopbtn');
< /script>
HTML代碼更是簡單:
<div id="gotopbtn">返回頂部</div>
其他就是CSS來渲染了,看CSS代碼:
< style type = "text/css" >
#gotopbtn { width : 20px; height : 50px; line-height : 999px; overflow : hidden; background : url(images/scrolltop.png) no-repeat 50 % 0; position : fixed; _ position : absolute; bottom : 100px; left : 50 %; margin-left : 440px; display : none; cursor : pointer }
</ style >
<! -- [ if lt IE 6 ]>
< style type = "text/css" >
html { _ text - overflow : ellipsis }
#gotopbtn { _ position : absolute; _ top : expression( eval( document . documentElement . scrollTop + 400 ))}
</ style >
<![ endif ] -- >
if lt IE 6就是原來判斷IE6下的顯示的,詳細的判斷規則可以看這裡