jquery操作与滚动条相关操作

1.返回顶部按钮实现
用到两个函数，和一个属性，scroll（）函数检测滚动条事件，通过scrollTop()得到滚动条离页面顶部的距离，文档内高度而不是，滚动条上的高度，点击按钮设置文档scrollTop的值为0,即可返回顶部。赋值下边代码，替换.top为按钮类即可。

$(function(){
$(window).scroll(function(){
    var t=$(this).scrollTop();
    if(t>200){
        $(".top").stop().fadeIn(); 
    }else{
        $(".top").stop().fadeOut();    
    }   
});
$(".top").click(function(){    
    $("body,html").stop().animate({scrollTop:0},300)
});
});

2.判断滚动条方向

$(function(){
    var topinit = $(window).scrollTop();
    $(window).scroll(function(){
        var top = $(this).scrollTop();
        if(top > topinit)
        {
            console.log("向下滚动");
        }
        else{
            console.log("向上滚动");
        }
        topinit = top;
    });
});

3.根据滚动条的位置加载对应动画或内容，逐次加载。

$(function(){
    var e_h = $(element).offset().top;//获得某个页面元素距离顶部的高度
    var h = 200;//定义一个数值，当滚动条距离页面顶部200时触发一个函数。
    $(window).scroll(function(){
        var top = $(window).scrollTop();//获得滚动条距离顶部的距离
        if(top > e_h-200)
        {
            //todo ....
        }
    });
});

4.自定义滚动条
使用jquery mCustomScrollbar插件，下次再说。