编程 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 相关文章推荐

jquery自定义属性(类型/属性值)

May 21 Javascript

HTML Color Picker(js拾色器效果)

Aug 27 Javascript

表单元素与非表单元素刷新区别详细解析

Nov 06 Javascript

javascript数组操作方法小结和3个属性详细介绍

Jul 05 Javascript

Javascript获取当前时间函数和时间操作小结

Oct 01 Javascript

原生JS和JQuery动态添加、删除表格行的方法

May 28 Javascript

JS实现table表格数据排序功能(可支持动态数据+分页效果)

May 26 Javascript

BootStrap轻松实现微信页面开发代码分享

Oct 21 Javascript

vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据

Oct 26 Javascript

JS实现数组去重方法总结(六种方法)

Jul 14 Javascript

JavaScript反射与依赖注入实例详解

May 29 Javascript

javascript设计模式 ? 工厂模式原理与应用实例分析

Apr 09 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

JavaScript高级程序设计（第3版）学习笔记12 js正则表达式

2012/10/11 Javascript

js中replace的用法总结

2013/12/27 Javascript

jQuery实现tab选项卡效果的方法

2015/07/08 Javascript

js实现文字闪烁特效的方法

2015/12/17 Javascript

深入学习AngularJS中数据的双向绑定机制

2016/03/04 Javascript

Javascript基础_简单比较undefined和null 值

2016/06/14 Javascript

jQuery DateTimePicker 日期和时间插件示例

2017/01/22 Javascript

JS中input表单隐藏域及其使用方法

2017/02/13 Javascript

js数组实现权重概率分配

2017/09/12 Javascript

Vue-cli-webpack搭建斗鱼直播步骤详解

2017/11/17 Javascript

javascript将非数值转换为数值

2018/09/13 Javascript

nodejs 使用nodejs-websocket模块实现点对点实时通讯

2018/11/28 NodeJs

微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

2018/12/11 Javascript

微信小程序文章详情页跳转案例详解

2019/07/09 Javascript

vue中el-input绑定键盘按键(按键修饰符)

2020/07/22 Javascript

python使用xlrd实现检索excel中某列含有指定字符串记录的方法

2015/05/09 Python

python实现井字棋游戏

2020/03/30 Python

python算法演练_One Rule 算法(详解)

2017/05/17 Python

解决python3 json数据包含中文的读写问题

2018/05/10 Python

python+splinter实现12306网站刷票并自动购票流程

2018/09/25 Python

解决使用PyCharm时无法启动控制台的问题

2019/01/19 Python

python爬虫解决验证码的思路及示例

2019/08/01 Python

更新升级python和pip版本后不生效的问题解决

2020/04/17 Python

Python3爬虫中Selenium的用法详解

2020/07/10 Python

python利用opencv保存、播放视频

2020/11/02 Python

美国婚礼装饰和活动用品批发供应商：Event Decor Direct

2018/10/12 全球购物

英国奢侈品在线精品店：Hervia

2020/09/03 全球购物

求职简历的自我评价怎样写好

2013/10/07 职场文书

英文自我鉴定

2013/12/10 职场文书

销售找工作求职信

2013/12/20 职场文书

给老师的感谢信

2015/01/20 职场文书

财务总监岗位职责范本

2015/04/03 职场文书

公司地址变更通知

2015/04/25 职场文书

巴黎圣母院观后感

2015/06/10 职场文书

2015秋季幼儿园开学通知

2015/07/16 职场文书

十大最强水系宝可梦，最美宝可梦排第三，榜首大家最熟悉

2022/03/18 日漫