js操作滾動(dòng)條事件實(shí)例

更新時(shí)間：2015年01月29日 16:35:54 投稿：shichen2014

這篇文章主要介紹了js操作滾動(dòng)條事件的方法,實(shí)例分析了滾動(dòng)條的使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了js操作滾動(dòng)條事件的方法。分享給大家供大家參考。具體分析如下：

之前一直很納悶，如何監(jiān)視滾動(dòng)條的事件，今天終于有點(diǎn)明白了。

下邊代碼，是監(jiān)聽滾動(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)聽某個(gè)元素的滾動(dòng)條事件

$(selector).scroll(function(){.......});

2.獲取滾動(dòng)條滾動(dòng)的距離

$(selector).scrollTop();
$(selector).scrollLefft();

PS：這里再為大家推薦一款關(guān)于JS事件的在線查詢工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：

javascript事件與功能說明大全：

http://tools.jb51.net/table/javascript_event

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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