页面返回顶部的功能代码
闲来无事,为自己的网站增加了这个功能,只要你的网站先前有了jquery,把下面的代码插入网页底部即可,具体效果就是小猫博客的效果,图片自行更换。这个代码也可改造成类似周小姐博客那种滑动菜单..

<script language="javascript" type="text/javascript">
var w3c = (document.getElementById) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var mymovey = new Number();
function IeTrueBody(){
return (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
}
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
</script>
<div id=backi style="Z-INDEX:2; POSITION: absolute; HEIGHT:auto">
<style type="text/css">
#backi{display:none;background:url(images/5-120601160009-50.png); cursor:pointer;}
#backi a{ text-decoration:none; color:#ccc; line-height:25px;display:block;float:left;margin-left:5px; }
#backi a:hover{ color:#f60; text-decoration:underline; }
</style>
<a class="navtop" href="javascript:void(0)" title="返回顶部" rel="返回顶部" style=" width:48px; height:82px; "></a>
</div>
<script language="JavaScript1.1">
function heartBeat(){
diffY=GetScrollTop();
var chen2=(window.screen.height)*0.7;
mymovey += Math.floor((diffY-document.getElementById('backi').style.top.replace("px","")+chen2)*0.1);
document.getElementById('backi').style.top = mymovey+"px";
var hideH=document.body.scrollTop;
var hideH2=document.documentElement.scrollTop;
if((hideH>0)||(hideH2>0)){
document.getElementById("backi").style.display= "block";
}else{
document.getElementById("backi").style.display= "none";
}
}
document.getElementById("backi").style.left= document.body.scrollWidth-150+"px";
window.setInterval("heartBeat()",1);
$(document).ready(function() {
$(".navtop").click(function(){
$('html,body').animate({scrollTop:0},500);
})
});
</script>文章来源:Clmao常乐猫
留言列表: