js操作滾動(dòng)條事件實(shí)例
本文實(shí)例講述了js操作滾動(dòng)條事件的方法。分享給大家供大家參考。具體分析如下:
之前一直很納悶,如何監(jiān)視滾動(dòng)條的事件,今天終于有點(diǎn)明白了。
下邊代碼,是監(jiān)聽(tīng)滾動(dòng)條只要移動(dòng),下方的返回頂部的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:滾動(dòng)條距離top端的距離
t>0,即滾動(dòng)條一旦滾動(dòng),立即執(zhí)行if()語(yǔ)句,else()中的代碼是,滾動(dòng)條到到top處時(shí),返回頂部的div隱藏
返回頂部按鈕的點(diǎn)擊操作:
$("#cgotop").click(function(){ $('body,html').animate({ scrollTop: 0 }, 100); return false; });
補(bǔ)充:
1、監(jiān)聽(tīng)某個(gè)元素的滾動(dòng)條事件
$(selector).scroll(function(){.......});
2.獲取滾動(dòng)條滾動(dòng)的距離
$(selector).scrollTop(); $(selector).scrollLefft();
PS:這里再為大家推薦一款關(guān)于JS事件的在線查詢工具,歸納總結(jié)了JS常用的事件類(lèi)型與函數(shù)功能:
javascript事件與功能說(shuō)明大全:
http://tools.jb51.net/table/javascript_event
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- 判斷滾動(dòng)條到底部的JS代碼
- js實(shí)現(xiàn)的文字橫向無(wú)間斷滾動(dòng)
- 徹底搞懂JS無(wú)縫滾動(dòng)代碼
- js獲取滾動(dòng)距離的方法
- 當(dāng)滾動(dòng)條滾動(dòng)到頁(yè)面底部自動(dòng)加載增加內(nèi)容的js代碼
- 淺析js 文字滾動(dòng)效果
- js判斷滾動(dòng)條是否已到頁(yè)面最底部或頂部實(shí)例
- js實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到頁(yè)面底部繼續(xù)加載
- 原生JS實(shí)現(xiàn)目錄滾動(dòng)特效
相關(guān)文章
基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript實(shí)現(xiàn)繼承的7種方式總結(jié)
用官方點(diǎn)的話講繼承是面向?qū)ο笕筇卣髦?,可以使得子?lèi)具有父類(lèi)的屬性和方法,同時(shí)還可以在子類(lèi)中重新定義以及追加屬性和方法。本文整理了JavaScript實(shí)現(xiàn)繼承的7種方式,需要的可以了解一下2023-04-04JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法,簡(jiǎn)單介紹了雙向鏈表的原理,并結(jié)合實(shí)例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下2017-10-10