与scrollTop相关的一些方法（更新）

刷新页面回到页面顶部

$(document).ready(function () {
        $(window).scrollTop(0);
}

滑动到页面指定位置执行某项操作

 $(document).ready(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 300) {
                //dosomething
            }
        });
    });

　最近做项目的时候，发现了一个问题，使用上面的方法无法获取到scrollTop的值，导致scrollTop值始终为0，去网上搜了一下才发现是DTD的问题。

　页面指定了DTD，即指定了DOCTYPE时（<!DOCTYPE html>），使用document.documentElement.scrollTop。

页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop。

　同时也发现了各个浏览器下获取scrollTop的是有差别的，下面来总结一下：

各浏览器下 scrollTop的差异

IE：

没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop

有doctype声明的页面，使用 document.documentElement.scrollTop；

Chrome、Firefox：

没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度；

有doctype声明的页面，使用 document.documentElement.scrollTop；

Safari:

safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset
SO,为了解决以上的兼容问题，我们获取页面scrollTop高度的时候建议直接写成兼容模式：

1 window.onscroll = function () {
2   var sTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0;  
3 
4 if(sTop > 400)
5 //TODO something you want
6 };

同理可得，scrollLeft（页面向左卷东距离）的获取方法

在vue项目中获取某一固定区域的scrollTop值时又发现了一个新方法，可以在需要监听区域的父级块元素上添加@scroll方法，代码如下：

<template>
  <div class="box" @scroll="getScroll">测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值。。。</div>  
</template>

<script>
export default {
  data() {
    return {
        sTop: ''
     }
   }  
 },
 methods:{
   getScroll(e){
　　　console.log(e)
     this. sTop = e.target.scrollTop
     if(this.scroll >= 500){
        //TODO something you want
    }
   }   
}
</script>
<style scope>
. box{
    position: relative;
     100%;
    height: 400px;
    overflow-y:auto;
}
</style>

希望能帮到大家，以后遇见新的问题还会持续更新！