刷新页面回到页面顶部

$(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高度的时候建议直接写成兼容模式：

 window.onscroll = function () {

   var sTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0;  

 if(sTop > 400)

 //TODO something you want

 };

同理可得，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;

    width: 100%;

    height: 400px;

    overflow-y:auto;

}

</style>

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

　



　
												


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

    
								
  1. BAT 前端开发面经 —— 吐血总结      前端相关片段整理——持续更新       前端基础精简总结    Web Storage      You don't know js
		
    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
    
		
    2. 
						
  2. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
		
    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
    
		
    3. 
						
  3. Android随笔之——Android时间、日期相关类和方法
		
    今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...
    
		
    4. 
						
  4. Java基础-继承-编写一个Java应用程序，设计一个汽车类Vehicle，包含的属性有车轮个数 wheels和车重weight。小车类Car是Vehicle的子类，其中包含的属性有载人数 loader。卡车类Truck是Car类的子类，其中包含的属性有载重量payload。每个 类都有构造方法和输出相关数据的方法。最后，写一个测试类来测试这些类的功 能。
		
    #29．编写一个Java应用程序,设计一个汽车类Vehicle,包含的属性有车轮个数 wheels和车重weight.小车类Car是Vehicle的子类,其中包含的属性有载人数 loader.卡车类T ...
    
		
    5. 
						
  5. 三种dedecms调用相关文章的方法
		
    在文章的末尾或侧边栏添加相关文章可以提高用户的黏度,提高pv,增加se的好印象(哈哈),那么dedecms如何调用相关文章呢?有三种方法可以实现. 第一种dedecms调用相关文章的方法,用默认的li ...
    
		
    6. 
						
  6. CakePHP采用model的save方法更新数据所需查询
		
    采用model的save方法更新数据所需查询 1. 验证时候要确认是update 或者 create,以便使用对应规则 public $validate = array( 'field_name' = ...
    
		
    7. 
						
  7. WinForms C#：html编辑器工程源码，含直接写WebBrowser的文件流、IPersistStreamInit接口的声明和一些相关的小方法
		
    原文:WinForms C#:html编辑器工程源码,含直接写WebBrowser的文件流.IPersistStreamInit接口的声明和一些相关的小方法 首先多谢朋友们的捧场: 今天给大家带来一个 ...
    
		
    8. 
						
  8. android studio gradle 两种更新方法更新
		
    android studio gradle 两种更新方法更新 第一种.Android studio更新 第一步:在你所在项目文件夹下:你项目根目录gradlewrappergradle-wrapper ...
    
		
    9. 
						
  9. 屏幕旋转时调用PopupWindow update方法更新位置失效的问题及解决方案
		
       接到一个博友的反馈,在屏幕旋转时调用PopupWindow的update方法失效.使用场景如下:在一个Activity中监听屏幕旋转事件,在Activity主布局文件中有个按钮点击弹出一个Pop ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 基础知识：if判断、while循环、for循环
			
    今日学习内容                   1.if 判断(流程控制的一种) 写重复的代码是程序员最不耻的行为,所以我们需要while循环和for循环 ,^_^!                 ...
    
			
    2. 
						
  2. jQuery(一)、核心
			
    我认为,学习一门语言,主要是掌握它的思想与用途,就好比谈恋爱一样,你只要猜测到了对方的想法,就能够知情达意.废话不多说,我们开始今天学习的进度,加油ヾ(◍°∇°◍)ﾉﾞ 1. jQuery([sele ...
    
			
    3. 
						
  3. 观察者模式与.Net Framework中的委托与事件
			
    本文文字内容均选自<大话设计模式>一书. 解释:观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够 ...
    
			
    4. 
						
  4. 小游戏大智慧，10 个让人眼前一亮的 JavaScript 游戏
			
    摘要: JS还可以这么玩~ Fundebug经授权转载,版权归原作者所有. 这是一篇有趣的文章,我们精选了 JS13K 游戏编程挑战的优秀作品,与大家分享.JS13K 是专为 JavaScript 开 ...
    
			
    5. 
						
  5. Android-蓝牙自动配对与隐藏对话框
			
    一.概述 本次分析是基于Android7.0的源码. 二.自动配对分析过程 首先,我们分析一下源码的自动配对过程,packages/apps/Settings/src/com/android/sett ...
    
			
    6. 
						
  6. MongoDB 中数据的替换方法实现 --类Replace()函数功能
			
    关键字: MongoDB,Replace,forEach 近日接到一个开发需求,因业务调整,需要DBA协助,将MongoDB数据库中某集合的进行替换.例如我们需要将集合A中B字段中,有关<美好& ...
    
			
    7. 
						
  7. python3 tkinter报错：_tkinter.TclError: cannot use geometry manager pack inside . which already has slaves managed by grid
			
    报错: _tkinter.TclError: cannot use geometry manager pack inside . which already has slaves managed by ...
    
			
    8. 
						
  8. windowsServer部署站点
			
    ### windowsServer部署站点 前言:最近在和朋友一起买了个服务器,奈何他选的是windowsServer,无所谓了,就把自己的站点从之前的虚拟主机迁过来,记录下. 准备工作: 服务器上搭 ...
    
			
    9. 
						
  9. 教你在浏览器里做出EXCEL的效果
			
    在浏览器里做出EXCEL的效果,复制.粘贴.设置公式.双击编辑等效果,如果自己开发的话,比较麻烦,建议使用成熟的插件.这里介绍使用智表ZCELL插件,实现用户快捷操作. 首先下载插件,引入到页面中,一 ...
    
			
    10. 
						
  10. git@github.com: Permission denied (publickey).////remote: Permission to xxx/test.git denied to xxx.等权限问题
			
    Error msg git@github.com: Permission denied (publickey) 或者: remote: Permission to xxx/test.git denie ...
    
			
    11.