DIV CSS 佈局教程網

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

之前一直很納悶，如何監視滾動條的事件，今天終於有點明白了。

下邊代碼，是監聽滾動條只要移動，下方的返回頂部的div顯示與隱藏的代碼

window.onscroll = function () { 
 var t = document.documentElement.scrollTop || document.body.scrollTop;
 if (t > 0) { 
 $(".cbbfixed").css("bottom", "10px"); 
 } else { 
 $(".cbbfixed").css("bottom", "-85px"); 
 } 
}

注：

t：滾動條距離top端的距離

t>0,即滾動條一旦滾動，立即執行if（）語句，else（）中的代碼是，滾動條到到top處時，返回頂部的div隱藏

返回頂部按鈕的點擊操作：

$("#cgotop").click(function(){ 
 $('body,html').animate({ scrollTop: 0 }, 100); 
 return false; 
});

補充：

1、監聽某個元素的滾動條事件

$(selector).scroll(function(){.......});

 
2.獲取滾動條滾動的距離

$(selector).scrollTop();
$(selector).scrollLefft();

 PS：這裡再為大家推薦一款關於JS事件的在線查詢工具，歸納總結了JS常用的事件類型與函數功能：

javascript事件與功能說明大全：

http://tools.jb51.net/table/javascript_event

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