這篇文章主要介紹了js網頁滾動條滾動事件的用法,實例分析了javascript中window.onscroll監控滾動條滾動事件的相關技巧,需要的朋友可以參考下

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

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

js網頁滾動條滾動事件

1. <style type="text/css"> 
2. #top_div{  
3. position:fixed;  
4. bottom:80px;  
5. right:0;  
6. display:none;  
7. }  
8. </style>  
9. <script type="text/javascript">  
10. window.onscroll = function(){  
11. var t = document.documentElement.scrollTop || document.body.scrollTop;  
12. var top_div = document.getElementById( "top_div" );  
13. if( t >= 300 ) {  
14. top_div.style.display = "inline";  
15. } else {  
16. top_div.style.display = "none";  
17. }  
18. }  
19. </script>  
20. <a name="top">頂部<a>  
21. <div id="top_div"><a href="#top">返回頂部</a></div>  
22. <br />  
23. <br />  
24. <div>  
25. 這里盡量多些<br />以便頁面出現滾動條，限于篇幅本文此處略去  
26. </div> 

例子語法解釋

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

javascript 語句中，t 得到滾動條向下滾動的位置，|| 是為了更好兼容性考慮

當滾動超過 300 (像素)時，將 top_div css display 屬性設置為顯示(inline)，反之則隱藏(none)

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

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