DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js網頁滾動條滾動事件實例分析
js網頁滾動條滾動事件實例分析
編輯:JavaScript綜合知識     

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

  在做js返回頂部的效果時,要監聽網頁滾動條滾動事件,這個事件就是:window.onscroll。當onscroll事件發生時,用js獲得頁面的scrollTop值,判斷scrollTop為一個設定值時,顯示“返回面部”

  js網頁滾動條滾動事件

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved