點選返回頂部程式碼具有緩衝效果

antzone發表於2017-03-13
原文網址 : https://www.softwhy.com/article-3139-1.html

在很多網站，尤其是頁面比較長的網站，都有點選返回頂部這個按鈕，一般位置在頁面的右下角。

這個功能有效的提高了網站的使用者體驗度，有效避免了人為拖動滾動條返回頂部之苦，下面就通過一段程式碼例項簡單介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>點選返回頂部例項程式碼-螞蟻部落</title>
<style type="text/css">
*
{
  margin:0px;
  padding:0px;
}
.fixed 
{
  position:fixed;
  bottom:100px;
  width:20px;
  right:100px;
  height:80px;
  font-size:12px;
　cursor:pointer;
  background-color:#F00;
}
.placeholder 
{
  height:2000px;
  width:20px;
  margin:0px auto;
  background-color:green;
}
</style>
<script type="text/javascript"> 
var tool={ 
  buffer:function(func,ms,context){ 
    var buffer; 
    return function(){ 
      if(buffer) return; 
      buffer=setTimeout(function(){ 
        func.call(this) 
        buffer=undefined; 
      },ms); 
    }; 
  }, 
  /*讀取或設定元素的透明度*/ 
  opacity:function(elem,val){ 
    var setting=arguments.length>1; 
    if("opacity" in elem.style)
    {
      return setting ? elem.style["opacity"] = val : elem.style["opacity"]; 
    }
    else
    { 
      if(elem.filters && elem.filters.alpha)
      { 
        return setting?elem.filters.alpha["opacity"]=val*100:elem.filters.alpha["opacity"]/100; 
      } 
    } 
  }, 
  documentScrollTop:function(val){ 
    var elem=document; 
    return (val!==undefined)? 
    elem.documentElement.scrollTop = elem.body.scrollTop = val : 
    Math.max(elem.documentElement.scrollTop, elem.body.scrollTop); 
  } 
}; 
//動畫效果 
var effect={ 
  fadein:function(elem){ 
  var val=0; 
  var interval=25; 
  setTimeout(function(){ 
    val += 0.1; 
    if(val>1)
    { 
      tool.opacity(elem, 1) 
      return; 
    }
    else
    { 
      tool.opacity(elem, val) 
      setTimeout(arguments.callee, interval); 
    } 
  },interval); 
}, 
fadeout:function(elem){ 
  var val=1; 
  var interval=25; 
  setTimeout(function(){ 
    val -= 0.1; 
    if(val < 0)
    { 
      tool.opacity(elem, 0) 
      return; 
    }
    else 
    { 
      tool.opacity(elem,val) ; 
      setTimeout(arguments.callee, interval); 
    } 
  },interval); 
}, 
move:function(scrollTop){ 
  setTimeout(function(){ 
    scrollTop = Math.floor((scrollTop * 0.65)); 
     tool.documentScrollTop(scrollTop); 
     if(scrollTop !=0 )
     { 
       setTimeout(arguments.callee, 25); 
     } 
   },25); 
  } 
}; 
function doScroll(){
  var visible=false; 
  var elem=document.getElementById("gotop"); 
  function onscroll(){ 
    var scrollTop = tool.documentScrollTop(); 
    if(scrollTop > 0)
    { 
      if(!visible)
      { 
        effect.fadein(elem) 
        visible = true; 
      } 
    }
    else
    { 
      if(visible)
      { 
        effect.fadeout(elem); 
        visible = false; 
      } 
    } 
  } 
  function onclick()
  { 
    var scrollTop = tool.documentScrollTop(); 
    effect.move(scrollTop); 
  } 
  elem.onclick = onclick; 
  window.onscroll = tool.buffer(onscroll, 200, this); 
} 
window.onload=function()
{
  doScroll();
}
</script>
</head>
<body>
<div id="gotop" class="fixed">返回頂部</div>
<div class="placeholder">螞蟻部落歡迎您，我很長的，可以向下拖動檢視效果</div>
</body>
</html>

以上程式碼實現了我們需要的功能，在預設狀態下返回頂部按鈕時隱藏的，當向下拖動一定距離之後才會以動畫方式顯示，點選按鈕可以以緩衝方式返回頂部，然後將返回頂部按鈕隱藏。具體實現過程這裡級不做介紹了，套用就可以，如有任何問題可以跟帖留言。

相關文章