编程 Javascript

Document.body.scrollTop的值总为零的快速解决办法

Posted in Javascript onJune 09, 2016

有一个功能需要判断返回顶部按钮是否显示。

JS代码如下：

var sTop = document.body.scrollTop;
  if(sTop>100){
    document.getElementById("sm_top").style.display="block";
  }else{
    document.getElementById("sm_top").style.display="none";
  }

但是发现document.body.scrollTop一直是0。

查资料发现是DTD的问题。

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。

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

IE和Firefox都是如此。

而我的页面加了<!DOCTYPE html>，所以如下即可。

/*判断回到顶部按钮显示与否*/
   window.onscroll=function(){
    var sTop = document.documentElement.scrollTop;
  if(sTop>100){
    document.getElementById("sm_top").style.display="block";
  }else{
    document.getElementById("sm_top").style.display="none";
  }
  }

以上所述是小编给大家介绍的Document.body.scrollTop的值总为零的解决办法，希望对大家有所帮助！

Document.body.scrollTop的值总为零的快速解决办法

- Author -

starof

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Extjs Ext.MessageBox.confirm 确认对话框详解

Apr 02 Javascript

jQuery实现的在线答题功能

Apr 12 Javascript

JavaScript中用toString()方法返回时间为字符串

Jun 12 Javascript

Angularjs实现多个页面共享数据的方式

Mar 29 Javascript

Angular4 中常用的指令入门总结

Jun 12 Javascript

Bootstrap Table 在指定列中添加下拉框控件并获取所选值

Jul 31 Javascript

在angular 6中使用 less 的实例代码

May 13 Javascript

Vue不能检测到Object/Array更新的情况的解决

Jun 26 Javascript

实例详解vue.js浅度监听和深度监听及watch用法

Aug 16 Javascript

微信小程序之裁剪图片成圆形的实现代码

Oct 11 Javascript

vue 中基于html5 drag drap的拖放效果案例分析

Nov 01 Javascript

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

Sep 10 Javascript

JavaScript事件学习小结（三）js事件对象

Jun 09 #Javascript

javaScript事件学习小结（四）event的公共成员（属性和方法）

Jun 09 #Javascript

JavaScript事件学习小结（一）事件流

Jun 09 #Javascript

JavaScript事件学习小结(五）js中事件类型之鼠标事件

Jun 09 #Javascript

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

Jun 09 #Javascript

JS实现星星评分功能实例代码(两种方法)

Jun 09 #Javascript

Node.js中npm常用命令大全

Jun 09 #Javascript

You might like

phpmyadmin 3.4 空密码登录的实现方法

2010/05/29 PHP

php函数与传递参数实例分析

2014/11/15 PHP

PHP的Laravel框架中使用消息队列queue及异步队列的方法

2016/03/21 PHP

详细分析PHP 命名空间(namespace)

2020/06/30 PHP

jquery 最简单易用的表单验证插件

2010/02/27 Javascript

window resize和scroll事件的基本优化思路

2014/04/29 Javascript

js实现网页随机切换背景图片的方法

2014/11/01 Javascript

angularjs中的e2e测试实例

2014/12/06 Javascript

nodejs中简单实现Javascript Promise机制的实例

2014/12/06 NodeJs

jQuery中siblings()方法用法实例

2015/01/08 Javascript

jQuery对指定元素中指定字符串进行替换的方法

2015/03/17 Javascript

无缝滚动的简单实现代码(推荐)

2016/06/07 Javascript

Cropper.js 实现裁剪图片并上传(PC端)

2017/08/20 Javascript

vue-resource + json-server模拟数据的方法

2017/11/02 Javascript

nodejs async异步常用函数总结（推荐）

2017/11/17 NodeJs

JS脚本实现网页自动秒杀点击

2018/01/11 Javascript

详解webpack+ES6+Sass搭建多页面应用

2018/11/05 Javascript

JavaScript 作用域实例分析

2019/10/02 Javascript

小程序卡片切换效果组件wxCardSwiper的实现

2020/02/13 Javascript

python使用sorted函数对列表进行排序的方法

2015/04/04 Python

Python中用psycopg2模块操作PostgreSQL方法

2017/11/28 Python

基于Django filter中用contains和icontains的区别(详解)

2017/12/12 Python

mac 安装python网络请求包requests方法

2018/06/13 Python

python3结合openpyxl库实现excel操作的实例代码

2018/09/11 Python

对pandas写入读取h5文件的方法详解

2018/12/28 Python

python 函数嵌套及多函数共同运行知识点讲解

2020/03/03 Python

乔丹诺(Giordano)酒庄德国官网：找到最好的意大利葡萄酒

2017/12/28 全球购物

广州喜创信息技术有限公司JAVA软件工程师笔试题

2012/10/17 面试题

总裁助理岗位职责

2014/02/17 职场文书

班级文化建设标语

2014/06/23 职场文书

单位委托书格式范本

2014/09/29 职场文书

师德师风建设整改措施思想汇报

2014/10/11 职场文书

保安辞职信范文

2015/02/28 职场文书

大学生自我鉴定怎么写

2019/05/07 职场文书

python中的class_static的@classmethod的巧妙用法

2021/06/22 Python

CSS 实现磨砂玻璃(毛玻璃)效果样式

2023/05/21 HTML / CSS