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>

 
互換性のあるIE 6のコード
IE 7および以上のブラウザバージョンは、完全に互換性があります.ただ、IE 6という不死身のものは、このような人を苦しめて、仕方なく単独で処理します.私が今使っている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]-->