本文實例講述了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();
希望本文所述對大家的javascript程序設計有所幫助。