判断页面顶部和底部常见操作

常见高度获取方法：

scrollHeight —— 内容高度
scrollTop —— 滚动高度
clientHeight —— 容器高度

 

1.平滑滚动到顶部

$('.js_go_to_top').click(function () {
    $(".js_scroll_area").animate({scrollTop: 0}, 600);
});

 

2.平滑滚动到底部

$('.js_go_to_bottom').click(function () {
    var scrollHeight = $('.js_scroll_area').prop("scrollHeight");
    $('.js_scroll_area').animate({scrollTop:scrollHeight}, 600);
});

 

3.判断滚动条滚动到底部

var nScrollHeight = $(".js_scroll_area")[0].scrollHeight;

//var nScrollHeight = $(".js_scroll_area").prop("scrollHeight")与上面等价

 

var nScrollTop = 0;

 

var nDivHeight = $(".js_scroll_area")[0].clientHeight; 

//var nDivHeight = $(".js_scroll_area").prop("clientHeight")与上面等价

 

$(".js_scroll_area").scroll(function () {

    nScrollTop = $(".js_scroll_area")[0].scrollTop;

    if (nScrollTop + nDivHeight >= nScrollHeight){

        alert("滚动条到底部了");

    }     

});