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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 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生成静态页面详解
2006/12/05 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python 控制终端输出文字的实例
2019/07/12 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
.net工程师笔试题
2012/06/09 面试题
params有什么用
2016/03/01 面试题
《匆匆》教学反思
2014/02/22 职场文书
超市客服工作职责
2014/06/11 职场文书
会计岗位职责
2015/02/03 职场文书
营运督导岗位职责
2015/04/10 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
《迟到》教学反思
2016/02/24 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python