js操作滾動條事件實(shí)例
更新時間：2015年01月29日 16:35:54 投稿：shichen2014
這篇文章主要介紹了js操作滾動條事件的方法,實(shí)例分析了滾動條的使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
本文實(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è)計(jì)有所幫助。
相關(guān)文章
本文主要介紹了拖動時防止選中的小知識點(diǎn)。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
本文為大家介紹下使用js判斷字符長度及中英文數(shù)字等，下面有個不錯的教程，感興趣的朋友可以參考下2013-12-12
這篇文章主要介紹了為什么JavaScript沒有塊級作用域的相關(guān)資料,需要的朋友可以參考下2016-05-05
通過JS解決頁面刷新導(dǎo)致按鈕OnClientClick事件消失問題
這篇文章主要介紹了如何通過JS解決頁面刷新導(dǎo)致按鈕OnClientClick事件消失問題,OnClientClick 提供客戶端JS執(zhí)行能力,并以 return false 或 return true 來決定是否繼續(xù)執(zhí)行 OnClick 事件,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序定位當(dāng)前城市的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
layui異步加載table表中某一列數(shù)據(jù)的例子
今天小編就為大家分享一篇layui異步加載table表中某一列數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
深入剖析JavaScript instanceof 運(yùn)算符
這篇文章主要介紹了深入剖析JavaScript instanceof 運(yùn)算符,ECMAScript 引入了另一個 Java 運(yùn)算符 instanceof 來解決這個問題。instanceof 運(yùn)算符與 typeof 運(yùn)算符相似，用于識別正在處理的對象的類型。,需要的朋友可以參考下2019-06-06
純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局（實(shí)例代碼）
這篇文章主要介紹了純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
JavaScript?Canvas實(shí)現(xiàn)圖片局部放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript?Canvas實(shí)現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03