js網頁滾動條滾動事件實例分析_javascript技巧

本文實例講述了js網頁滾動條滾動事件用法。分享給大家供大家參考。具體分析如下：

在做js返回頂部的效果時，要監聽網頁滾動條滾動事件，這個事件就是：window.onscroll。當onscroll事件發生時，用js取得頁面的scrollTop值，判斷scrollTop為一個設定值時，顯示「回到臉部」

js網頁滾動條滾動事件

<style type="text/css"> 
#top_div{ 
  position:fixed; 
  bottom:80px; 
  right:0; 
  display:none; 
} 
</style> 
<script type="text/javascript"> 
window.onscroll = function(){ 
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  var top_div = document.getElementById( "top_div" ); 
  if( t >= 300 ) { 
    top_div.style.display = "inline"; 
  } else { 
    top_div.style.display = "none"; 
  } 
} 
</script> 
<a name="top">顶部<a> 
<div id="top_div"><a href="#top">返回顶部</a></div> 
<br /> 
<br /> 
<div> 
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去 
</div>

範例語法解釋

在 style 標籤中先定義 top_div css 屬性：position:fixed;display:none; 是關鍵

javascript 語句中，t 得到滾動條向下捲動的位置，|| 是為了更好相容性考慮
當捲動超過 300 （像素）時，將 top_div css display 屬性設為顯示(inline)，反之則隱藏(none)

必須設定 DOCTYPE 類型，在 IE 中才能利用 document.documentElement 來取得視窗的寬度及高度

希望本文所述對大家的javascript程式設計有所幫助。