javascript返回顶部几种代码总结

时间：2023-03-08 17:28:16

纯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]-->

相关文章