js获取元素距离浏览器顶端的距离

首先介绍几个属性（都是jquery的属性，可以免去兼容性的烦恼）

1. 网页被卷起来的高度/宽度（即浏览器上方隐藏的页面内容高度）

    $(window).scrollTop()      //卷起来的高度
    $(window).scrollLeft()     //卷起来的宽度（现在网页基本都是响应式，使用的地方较少）

2. 浏览器工作区域的高度和宽度

    $(window).height()     
    $(window).width()   

3. 元素距离文档顶端和左边的偏移值

    jq对象.offset().top
    jq对象.offset().left

4.页面的文档高度

    var documentHeight = $(document).height();    //页面的文档高度

很多时候我们需要知道元素距离浏览器顶端的距离（一般用来设置锚点实现一些效果）

一、获取页面元素距离浏览器工作区顶端的距离

  元素距离浏览器工作区顶端的距离 =   元素距离文档顶端偏移值  -   网页被卷起来的高度  
               var theDistance = jq对象.offset().left - $(window).scrollTop() 

二、当滚动条滚动到底部触发事件

$(window).scroll(function(){
    var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面被卷起来高度)
    var documentHeight = $(document).height();    //页面的文档高度
    var browserHeight = $(window).height();    //浏览器的工作区域高度
    if(documentHeight - browserHeight - srollPos <10){    //我这里是小于10像素
        alert('lalalal')           
    }
});

三、滚动到指定位置

window.scroll(0,0)    //滚动到顶部，没有动效
window.scrollTo(0,0)  //scrollTo和scroll一样的

四、div滚动到底部

let divTags = document.getElementById('div1')
divTags.scrollTop = divTags.scrollHeight;

参考文章 http://www.cnblogs.com/fnz0/p/5510758.html