點選緩慢滑動返回頂部

返回頂部元件是一種極其常見的網頁功能，需求簡單：頁面滾動一定距離後，顯示返回頂部的按鈕，點選該按鈕可以將滾動條滾回至頁面開始的位置。

1. 使用setinerval實現緩慢返回頂部

  //核心js程式碼
   var top=document.getElementById("backTop");
   var bottom=document.getElementById("backTop");
   top.onclick=function(){
       //alert(11);
       timer=setInterval(function(){
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var ispeed=Math.floor(-scrollTop/6);
           console.log(ispeed)
           if(scrollTop==0){
               clearInterval(timer);
           }
           document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
       },30)
   };
 

使用新增id=“backTop” 。

2. 使用Javascript Scroll函式緩慢返回頂部

function backTop() {
  window.scrollBy(0,-100);
  scrolldelay=setTimeout('backTop()',100);
  if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);
 }

使用時onclick=“backTopl();”。

3. 使用onload加上scroll功能實現緩慢返回頂部

BackTop=function(btnId){
  var btn=document.getElementById(btnId);
  var page=document.documentElement;
  window.onscroll=set;
  btn.onclick=function(){
   btn.style.display="none";
   window.onscroll=null;
   this.timer=setInterval(function(){
    page.scrollTop-=Math.ceil(page.scrollTop*0.1);
    if(page.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);
   },10);
  };
  function set(){
   btn.style.display=page.scrollTop?'block':"none"}
  };
  BackTop('backTop');
 

使用時新增id=“backTop” 。

4. 使用jquery外掛實現緩慢返回頂部
   下載連結（內含說明）
   http://www.jq22.com/jquery-info325
   js部分：

$(function(){   
    $(window).scroll(function() {      
        if($(window).scrollTop() >= 100){
            $('.actGotop').fadeIn(300); 
        }else{    
            $('.actGotop').fadeOut(300);    
        }  
    });
    $('.actGotop').click(function(){
    $('html,body').animate({scrollTop: '0px'}, 800);});   
});
 

5. 使用jquery動畫緩慢返回頂部

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
  $("a").click(function(){
   $('html,body').animate({'scrollTop':'0'},500,)
  })
 </script>