JavaScript返回頂部詳解

admin發表於2018-08-11
JavaScript

返回網頁頂部的功能大家應該都很熟悉，作用更是不用多說。

本章節就介紹一下使用原生JavaScript實現此功能。

程式碼例項如下:

[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; 
} 
#mayi { 
  width:20px; 
  height:1000px; 
  background-color:green; 
  margin:0px auto; 
} 
#top { 
  position:fixed; 
  right:10px; 
  bottom:50px; 
  width:20px; 
  height:70px; 
  background-color:red; 
  cursor:pointer;
  display:none;
  font-size:12px; 
} 
</style> 
<script type="text/javascript">  
var x;
var otop;
function myScroll()  {  
  var timer=setInterval(function(){  
    var moveby=15;
    x-=Math.ceil(x*moveby/100);
    if(x<=0){
      x=0;
      clearInterval(timer);
    }
    if(document.body.scrollTop){
      document.body.scrollTop=x;
    }
    else{
      document.documentElement.scrollTop=x; 
    }
  },20); 
}
function switchD(){
  x=document.body.scrollTop||document.documentElement.scrollTop;  
  if(x>100){
    otop.style.display="block"; 
  }
  else{
    otop.style.display="none";
  }
}  
window.onload=function() { 
  otop=document.getElementById("top"); 
  window.onscroll=switchD;
  otop.onclick=myScroll; 
} 
</script>  
</head> 
<body> 
<div id="mayi">螞蟻部落歡迎您</div>  
<div id="top">返回頂端</div>  
</body>  
</html>

當向下拖動滾動條的一定的距離的時候，出現返回頂部按鈕；點選按鈕能夠平滑的返回網頁頂部。

一.實現原理:

（1）.如何實現向下拖動一定距離才會出現按鈕:

為window註冊onscroll事件處理函式，當拖動滾動條時通過x=document.body.scrollTop||document.documentElement.scrollTop獲取滾動的距離。在預設狀態下，按鈕是隱藏的，當向下拖動的距離超過指定距離就會將按鈕設定為顯示狀態，如果小於指定距離就會隱藏。

（2）.如何實現返回頂部:

點選按鈕會執行為此按鈕註冊的click事件處理函式，此函式通過定時器函式setInerval不斷設定scrollTop值，直到為0，這樣就實現了返回頂部效果，原理大體如此。

二.相關閱讀:

（1）.setInterval()參閱setInterval()一章節。

（2）.Math.ceil()參閱javascript Math.ceil()一章節。

（3）.clearInterval()參閱window clearInterval()一章節。

（4）.document.body.scrollTop||document.documentElement.scrollTop參閱document.documentElement.scrollTop瀏覽器相容一章節。 

（5）.onscroll事件參閱javascript scroll 事件一章節。

相關文章