js操作滾動條事件實例_javascript技巧

本文實例講述了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程式設計有所幫助。