js操作滾動條事件實(shí)例
本文實(shí)例講述了js操作滾動條事件的方法。分享給大家供大家參考。具體分析如下:
之前一直很納悶,如何監(jiān)視滾動條的事件,今天終于有點(diǎn)明白了。
下邊代碼,是監(jiān)聽滾動條只要移動,下方的返回頂部的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,即滾動條一旦滾動,立即執(zhí)行if()語句,else()中的代碼是,滾動條到到top處時,返回頂部的div隱藏
返回頂部按鈕的點(diǎn)擊操作:
$("#cgotop").click(function(){ $('body,html').animate({ scrollTop: 0 }, 100); return false; });
補(bǔ)充:
1、監(jiān)聽某個元素的滾動條事件
$(selector).scroll(function(){.......});
2.獲取滾動條滾動的距離
$(selector).scrollTop(); $(selector).scrollLefft();
PS:這里再為大家推薦一款關(guān)于JS事件的在線查詢工具,歸納總結(jié)了JS常用的事件類型與函數(shù)功能:
javascript事件與功能說明大全:
http://tools.jb51.net/table/javascript_event
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript實(shí)現(xiàn)繼承的7種方式總結(jié)
用官方點(diǎn)的話講繼承是面向?qū)ο笕筇卣髦唬梢允沟米宇惥哂懈割惖膶傩院头椒?,同時還可以在子類中重新定義以及追加屬性和方法。本文整理了JavaScript實(shí)現(xiàn)繼承的7種方式,需要的可以了解一下2023-04-04JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法,簡單介紹了雙向鏈表的原理,并結(jié)合實(shí)例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下2017-10-10