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

动态加载js的几种方法

Oct 23 Javascript

JavaScript 不只是脚本

May 30 Javascript

JS在IE和FF下attachEvent,addEventListener学习笔记

Nov 26 Javascript

扩展easyui.datagrid，添加数据loading遮罩效果代码

Nov 02 Javascript

获得所有表单值的JQuery实现代码[IE暂不支持]

May 24 Javascript

如何阻止复制剪切和粘贴事件为了表单内容的安全

May 23 Javascript

JS实现霓虹灯文字效果的方法

Aug 06 Javascript

jquery trigger实现联动的方法

Feb 29 Javascript

vue.js 表格分页ajax 异步加载数据

Oct 18 Javascript

关于vue3默认把所有onSomething当作v-on事件绑定的思考

May 15 Javascript

vue监听滚动事件的方法

Dec 21 Vue.js

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

php&java（二）

2006/10/09 PHP

常用的php ADODB使用方法集锦

2008/03/25 PHP

smarty巧妙处理iframe中内容页的代码

2012/03/07 PHP

6种php上传图片重命名的方法实例

2013/11/04 PHP

php include类文件超时问题处理

2015/02/06 PHP

javascript事件问题

2009/09/05 Javascript

javascript针对DOM的应用分析（二）

2012/04/15 Javascript

顶部缓冲下拉菜单导航特效的JS代码

2013/08/27 Javascript

Checbox的操作含已选、未选及判断代码

2013/11/07 Javascript

JQuery包裹DOM节点的方法

2015/06/11 Javascript

使用AmplifyJS组件配合JavaScript进行编程的指南

2015/07/28 Javascript

原生js与jQuery实现简单的tab切换特效对比

2015/07/30 Javascript

全面解析JavaScript中的valueOf与toString方法(推荐)

2016/06/14 Javascript

老生常谈js-react组件生命周期

2017/05/02 Javascript

jQuery用户头像裁剪插件cropbox.js使用详解

2017/06/07 jQuery

AngularJS通过ng-Img-Crop实现头像截取的示例

2017/08/17 Javascript

javascript 产生随机数的几种方法总结

2017/09/26 Javascript

浅谈Vue.js中ref ($refs)用法举例总结

2017/12/19 Javascript

微信小程序wepy框架学习和使用心得详解

2019/05/24 Javascript

JS三级联动代码格式实例详解

2019/12/30 Javascript

JS使用正则表达式实现常用的表单验证功能分析

2020/04/30 Javascript

Python open读写文件实现脚本

2008/09/06 Python

Python实现大文件排序的方法

2015/07/10 Python

python正则表达式的使用

2017/06/12 Python

python二进制文件的转译详解

2019/07/03 Python

Python读取excel文件中带公式的值的实现

2020/04/17 Python

使用python库xlsxwriter库来输出各种xlsx文件的示例

2020/09/01 Python

使用phonegap获取设备的一些信息方法

2017/03/31 HTML / CSS

IMPORT的选项IGNORE有什么作用？缺省是什么设置？

2015/09/17 面试题

幼师专业求职推荐信

2013/11/08 职场文书

商场主管竞聘书

2014/03/31 职场文书

行政专员求职信范文

2014/05/03 职场文书

2014年商场工作总结

2014/11/22 职场文书

校车司机安全责任书

2015/05/11 职场文书

几款流行的HTML5 UI框架比较(小结)

2021/04/08 HTML / CSS

Python实现机器学习算法的分类

2021/06/03 Python