页面返回顶部的功能代码

闲来无事,为自己的网站增加了这个功能,只要你的网站先前有了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常乐猫

标签：网站建设  seo优化