jQuery 滾動監聽總結

JQuery監聽頁面滾動總結

1、當前滾動的地方的窗口頂端到整個頁面頂端的距離：

        var winPos = $(window).scrollTop();

2、獲取指定元素的頁面位置：

        $(val).offset().top;

3、對頁面滾動條滾動的監聽：要放在頁面加載的時候

      $(window).scroll(function(event){

    });

4、設置滾動條到指定位置。$(window).scrollTop(offset)。

 

例如：jquery判斷滾動條距離頂部的距離

//滾動監聽顯示回頂部
function jianting(){
    $(window).scroll(function(){
// 滾動條距離頂部的距離 大於300px時
        if($(window).scrollTop() >= 300){
            $("#xiaohuojian").fadeIn(1000); // 開始淡入
        } else{
            $("#xiaohuojian").stop(true,true).fadeOut(1000); // 如果小於等於 300 淡出
        }
    });
}
//點擊回到頁面頂部
function huidingbu(){
    $("#xiaohuojian").click(function(){
        $("html,body").animate({scrollTop:"0px"},'slow');
    });
}