刷新页面回到页面顶部
$(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>
希望能帮到大家，以后遇见新的问题还会持续更新！