js,jquery 獲取滾動條高度和位置, 元素距頂部距離

一,獲取滾動條高度和位置

jQuery
獲取覽器顯示區域的高度： $(window).height(); 
獲取瀏覽器顯示區域的寬度：$(window).width();
獲取頁面的文檔高度：$(document).height();
獲取頁面的文檔寬度：$(document).width();

獲取滾動條到頂部的垂直高度：$(document).scrollTop()或$(window).scrollTop()
獲取滾動條到左邊的垂直寬度：$(document).scrollLeft()或$(window).scrollLeft()

Javascript

$(window).scroll(function() {
    console.log(ScollPostion());
});

function ScollPostion() { //滾動條位置
    var t, l, w, h;
    if(document.documentElement && document.documentElement.scrollTop) {
        t = document.documentElement.scrollTop;
        l = document.documentElement.scrollLeft;
        w = document.documentElement.scrollWidth;
        h = document.documentElement.scrollHeight;
    } else if(document.body) {
        t = document.body.scrollTop;
        l = document.body.scrollLeft;
        w = document.body.scrollWidth;
        h = document.body.scrollHeight;
    }
    return {
        top: t,
        left: l,
        width: w,
        height: h
    };
}

 

二,元素距離頁面頂部距離:

jQuery

$("#elt_id").offset().top;

 

Javascipt

document.getElementById("elt_id").offsetTop;

 

 

文章來源:http://blog.51cto.com/maplebb/1864637