DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js操作滾動條事件實例教程
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程序設計有所幫助。

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