欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)聽(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ì)有所幫助。

相關(guān)文章

  • JS控制文本域只讀或可寫(xiě)屬性的方法

    JS控制文本域只讀或可寫(xiě)屬性的方法

    這篇文章主要介紹了JS控制文本域只讀或可寫(xiě)屬性的方法,涉及javascript針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
    2016-06-06
  • js實(shí)現(xiàn)的美女瀑布流效果代碼

    js實(shí)現(xiàn)的美女瀑布流效果代碼

    美女瀑布流效果分享一下,大家勿噴啊 借用新浪的美女 嘿嘿 睜大你的眼睛
    2012-11-11
  • 基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)

    基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng)

    這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)二級(jí)下拉聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JavaScript面向?qū)ο蠓謱铀季S全面解析

    JavaScript面向?qū)ο蠓謱铀季S全面解析

    這篇文章主要介紹了JavaScript面向?qū)ο蠓謱铀季S,js本身不是面向?qū)ο笳Z(yǔ)言,在我們實(shí)際開(kāi)發(fā)中其實(shí)很少用到面向?qū)ο笏枷?。下文關(guān)于js面向?qū)ο笾R(shí)給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2016-11-11
  • JavaScript實(shí)現(xiàn)繼承的7種方式總結(jié)

    JavaScript實(shí)現(xiàn)繼承的7種方式總結(jié)

    用官方點(diǎn)的話講繼承是面向?qū)ο笕筇卣髦?,可以使得子?lèi)具有父類(lèi)的屬性和方法,同時(shí)還可以在子類(lèi)中重新定義以及追加屬性和方法。本文整理了JavaScript實(shí)現(xiàn)繼承的7種方式,需要的可以了解一下
    2023-04-04
  • JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例

    JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法示例

    這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表定義與使用方法,簡(jiǎn)單介紹了雙向鏈表的原理,并結(jié)合實(shí)例形式分析了雙向鏈表的定義與使用方法,需要的朋友可以參考下
    2017-10-10
  • phpwind放自動(dòng)注冊(cè)方法

    phpwind放自動(dòng)注冊(cè)方法

    phpwind放自動(dòng)注冊(cè)方法...
    2006-12-12
  • Js控制滑輪左右滑動(dòng)實(shí)例

    Js控制滑輪左右滑動(dòng)實(shí)例

    這篇文章主要介紹了Js控制滑輪左右滑動(dòng)實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2015-02-02
  • JavaScript Split()方法

    JavaScript Split()方法

    split()方法可以利用字符串的子字符串的作為分隔符將字符串分割為字符串?dāng)?shù)組,并返回此數(shù)組,本文給大家介紹javascript split 方法,對(duì)本文感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • 原生JS實(shí)現(xiàn)跑馬燈效果

    原生JS實(shí)現(xiàn)跑馬燈效果

    本文主要分享了原生JS實(shí)現(xiàn)跑馬燈效果的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02

最新評(píng)論