js滾動(dòng)條事件：

<div> 元素滾動(dòng)時(shí)執(zhí)行 JavaScript

<div onscroll="myFunction()">

onscroll 事件在元素滾動(dòng)條在滾動(dòng)時(shí)觸發(fā)。

提示： 使用 CSS overflow 樣式屬性來創(chuàng)建元素的滾動(dòng)條。

jquery滾動(dòng)條事件：

對(duì)元素滾動(dòng)的次數(shù)進(jìn)行計(jì)數(shù)：

$("div").scroll(function() {
  $("span").text(x+=1);
});

定義和用法

當(dāng)用戶滾動(dòng)指定的元素時(shí)，會(huì)發(fā)生 scroll 事件。

scroll 事件適用于所有可滾動(dòng)的元素和 window 對(duì)象（瀏覽器窗口）。

scroll() 方法觸發(fā) scroll 事件，或規(guī)定當(dāng)發(fā)生 scroll 事件時(shí)運(yùn)行的函數(shù)。

最近做項(xiàng)目用了到scroll滾動(dòng)條事件，花了很多時(shí)間做搜索，沒有很好的先整理思考后再去搜索，做編碼事件時(shí)，沒有事先考慮清楚，理清思路，先做簡(jiǎn)單的測(cè)試成功后，再完成其他的實(shí)現(xiàn)。

1.scroll()事件

當(dāng)用戶滾動(dòng)指定的元素時(shí)，會(huì)發(fā)生scroll事件。適用于所有可滾動(dòng)的元素和window對(duì)象（瀏覽器窗口）

$(select).scroll([Data],fn);

當(dāng)（瀏覽器窗口）頁面滾動(dòng)條變化時(shí)，執(zhí)行的函數(shù)，JQuery代碼：

$(window).scroll(function(){
　　//do something...
});

2.scrollTop 獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移

scrollTop(val)

獲取頁面滾動(dòng)條的具體值：$(document).scrollTop()；

設(shè)置相對(duì)滾動(dòng)條的偏移值：$(document).scrollTop(300);

3.offset() 獲取匹配元素在當(dāng)前視口的相對(duì)偏移。

offset([coordinates])

獲取元素的相對(duì)偏移：$(".bg02").offset().top;

設(shè)置元素的相對(duì)偏移：$(".bg02").offset({"top":1000, "left":0});

4.需求：當(dāng)(瀏覽器窗口)頁面滾動(dòng)條值小于300px時(shí)隱藏div，大于300px時(shí)顯示div

$(window).scroll(function(){
　　//var ds = document.documetElement.scrollTop || document.body.scrollTop;　　//js兼容獲取滾動(dòng)條
　　if($(document).scrollTop() < 300){
　　　　$(".position").css({"display":"none"});
　　}else{
　　　　$(".position").css({"display":"block"});
　　}
});

5.返回頂部和元素定位(1-10)

$(".position ul li").click(function(){
　　var num_index = $(this).index() + 1;
      if(num_index < 10){
   　　　$("html,body").animate({scrollTop:$(".bg0" + num_index).offset().top},800);
      }else if(num_ineex ==10){
　　　　$("html,body").animate({$(".bg"+num_index).offset().top},800);
　　}else if(num_index == 11){
　　　　$("html,body").animate({scrollTop:0},800);
      }else{
　　　　return false;
      }
});

js例子：

<a id="scrollup" href="#top" style="position:fixed;z-index: 999;display: none;">^</a>
#scrollup{
        background: #777;
        color:#eee;
        font-size: 40px;
        text-align: center;
        text-decoration: none;
        bottom:65px;
        right:20px;
        overflow: hidden;
        width:46px;
        height:46px;
        border:none;
        opacity:.8;
        &:active{opacity:.7;}
    }
<script type="text/javascript">
         window.onscroll= function(){
                //變量t是滾動(dòng)條滾動(dòng)時(shí)，距離頂部的距離
                var t = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollup = document.getElementById('scrollup');
                //當(dāng)滾動(dòng)到距離頂部200px時(shí)，返回頂部的錨點(diǎn)顯示
                if(t>=200){
                    scrollup.style.display="block";
                }else{          //恢復(fù)正常
                    scrollup.style.display="none";
                }
            }
</script>

• scroll
• 滾動(dòng)條