javascript js 返回顶部 源代码 兼容ie火狐谷歌等浏览器

来源:互联网 发布:win7 录屏软件 编辑:程序博客网 时间:2024/05/12 11:31

此段js结合了网络上的一些代码,然后本人给改良了一下。可以兼容各个浏览器。按钮的现在位置是显示屏的中间往右470px。最下面的img标签里是用图片来做回顶部的按钮,您可以自己找一张喜欢的图片来做按钮,改一下路径就可以了。 喜欢的可以加php qq群:196136757。一起讨论

刚才发现一个问题,如果高分辨率浏览网页的话,一般都会把缩放调到150%,所以css样式的话改为:

#zhongyang{
 POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 50px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 10px; _position: absolute; _right: auto
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>返回顶部按钮</title>
   <meta name="keywords" content=""/>
   <meta name="Description" content=""/>
 </head>
  
<body style="height:1000px;">

<style type="text/css">
#zhongyang{ width:20px; height:50px; position:fixed; top:50%; left:50%; margin:200px auto auto 470px; _position:absolute;background:#ccc}
</style>
<!--下面这段js兼容ie6的-->
<script language="javascript">
function position_fixed(domId){
 el = document.getElementById(domId);
 el.style.display = "block";
    // check is IE6  
   if(!window.XMLHttpRequest)  
       window.onscroll = function(){
         el.style.top=document.documentElement.scrollTop+document.documentElement.clientHeight/2+"px";
}  
}

setTimeout("position_fixed('zhongyang')", 3000);//延迟3秒后弹出

function goTopEx(){
        var obj=document.getElementById("zhongyang");
        function getScrollTop(){
                return document.documentElement.scrollTop||document.body.scrollTop;
            }
        function setScrollTop(value){
                document.documentElement.scrollTop=value;
            }   
        window.onscroll=function(){getScrollTop()>200?obj.style.display="":obj.style.display="none";}
        obj.onclick=function(){
   window.scroll(0,0);
            var goTop=setInterval(scrollMove,10);
            function scrollMove(){
                    setScrollTop(getScrollTop()/0);
                    if(getScrollTop()<1)clearInterval(goTop);
                }
        }
    }
</script>
<DIV style="DISPLAY: none;cursor:pointer;" id=zhongyang>
<IMG border=0 src="./img/scrolltop.png" title="返回顶部">
</DIV>
<SCRIPT type=text/javascript>goTopEx();</SCRIPT>
  </body>
</html>

原创粉丝点击