javascript返回顶部几种代码总结

时间：2024-03-12 10:50:01

纯js代码

/**
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
 acceleration = acceleration || 0.1;
 time = time || 16;
 
 var x1 = 0;
 var y1 = 0;
 var x2 = 0;
 var y2 = 0;
 var x3 = 0;
 var y3 = 0;
 
 if (document.documentElement) {
  x1 = document.documentElement.scrollLeft || 0;
  y1 = document.documentElement.scrollTop || 0;
 }
 if (document.body) {
  x2 = document.body.scrollLeft || 0;
  y2 = document.body.scrollTop || 0;
 }
 var x3 = window.scrollX || 0;
 var y3 = window.scrollY || 0;
 
 // 滚动条到页面顶部的水平距离
 var x = Math.max(x1, Math.max(x2, x3));
 // 滚动条到页面顶部的垂直距离
 var y = Math.max(y1, Math.max(y2, y3));
 
 // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
 var speed = 1 + acceleration;
 window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
 // 如果距离不为零, 继续调用迭代本函数
 if(x > 0 || y > 0) {
  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
  window.setTimeout(invokeFunction, time);
 }
}

调用方法

返回到顶部调用方法很简单：

<a href="#" onclick="goTop();return false;">TOP</a>

jquery实现代码

<script src="js/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function () {
  var bt = $(\'#toolBackTop\');
  var sw = $(document.body)[0].clientWidth;
 
  var limitsw = (sw - 840) / 2 - 80;
  if (limitsw > 0){
   limitsw = parseInt(limitsw);
   bt.css("right",limitsw);
  }
 
  $(window).scroll(function() {
   var st = $(window).scrollTop();
   if(st > 30){
    bt.show();
   }else{
    bt.hide();
   }
  });
 })
 </script>

调用方法

<div style="display:none;" class="back-to" id="toolBackTop"> 
 <a title="返回顶部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"> 
 返回顶部</a> 
 </div>

 

兼容IE6的代码

IE7及以上的浏览器版本，是完全可以兼容的，唯独IE6这个老不死的东西，就是这样子的折腾人，没办法，单独处理。
我目前用的JS代码就很简单，也是利用了Jquery的，外部加载Jquery就不用多说了。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]-->

 

相关文章