js點選返回網頁頂部程式碼例項詳解

admin發表於2017-04-05
JS網頁

本章節分享一段程式碼例項，它實現了點選返回網頁頂部的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  margin:0; 
  padding:0;
  height:1500px;
  width:2000px;
}
#to_top{
  width:30px; 
  height:40px; 
  padding:20px; 
  font:14px/20px arial; 
  text-align:center; 
  background:#06c; 
  position:absolute; 
  cursor:pointer; 
  color:#fff
}
</style>
<script>
window.onload = function(){
  var oTop = document.getElementById("to_top");
  var screenw = document.documentElement.clientWidth || document.body.clientWidth;
  var screenh = document.documentElement.clientHeight || document.body.clientHeight;
  oTop.style.left = screenw - oTop.offsetWidth +"px";
  oTop.style.top = screenh - oTop.offsetHeight + "px";
  window.onscroll = function(){
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
    oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
    oTop.style.left = screenw - oTop.offsetHeight + scrollleft +"px";
  }
  oTop.onclick = function(){
    document.documentElement.scrollTop = document.body.scrollTop =0;
  }
} 
</script>
</head>
<body>
<div id="to_top">返回頂部</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oTop = document.getElementById("to_top")，獲取id屬性值為to_top的元素物件。

（3）.var screenw = document.documentElement.clientWidth || document.body.clientWidth，獲取瀏覽器客戶區的寬度，這裡採用的是相容性寫法，在相關閱讀會有相關文章介紹。

（4）.var screenh = document.documentElement.clientHeight || document.body.clientHeight，獲取瀏覽器客戶區的高度，這裡採用的是相容性寫法，在相關閱讀會有相關文章介紹。

（5）.oTop.style.left = screenw - oTop.offsetWidth +"px"，設定left屬性值為客戶區的寬度減去元素本身的寬度。（6）.oTop.style.top = screenh - oTop.offsetHeight + "px"，設定top屬性值為客戶區的高度減去元素本身的高度。

（7）.window.onscroll = function(){}，為window物件註冊onscroll事件處理函式。

（8）.var scrolltop = document.documentElement.scrollTop || document.body.scrollTop，獲取網頁向上滾動的尺寸。

（9）.var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;，獲取網頁向左滾動的尺寸。

（10）.oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px"，將元素固定於網頁的底部。

（11）.oTop.style.left = screenw - oTop.offsetHeight + scrollleft +"px"，將元素固定於網頁的右側。

（12）.oTop.onclick = function(){

  document.documentElement.scrollTop = document.body.scrollTop =0;

}，點選按鈕可以返回網頁的頂部。

二.相關閱讀:

（1）.offsetWidth可以參閱js offsetWidth一章節。

（2）.scrollTop可以參閱scrollTop一章節。

（3）.onscroll事件可以參閱javascript scroll 事件一章節。

相關文章