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的值总为零的解决办法,希望对大家有所帮助!

Javascript 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 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
php递归使用示例(php递归函数)
2014/02/14 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python 必须了解的5种高级特征
2020/09/10 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
婚前协议书
2014/04/15 职场文书
尊师重教演讲稿
2014/09/04 职场文书
道歉短信大全
2015/05/12 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2016年教师节慰问信
2015/12/01 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫