javascript返回頂部幾種代碼總結

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

總結
原理:不管是純js的還是jquery實現的，我們會擷取捲軸到頁面頂部的距離, 然後上移一定的距離; 再擷取捲軸到頁面頂部的距離, 上移一定的距離 (比上一次小一點);