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 04 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
javascript实现前端分页效果
Jun 24 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
javascript Number 与 Math对象的介绍
Nov 17 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简单实现无限分类树形列表的方法
2015/03/27 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
浅谈Vue数据响应
2018/11/05 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python 合并拼接字符串的方法
2020/07/28 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
PHP面试题及答案一
2012/06/18 面试题
我的祖国演讲稿
2014/05/04 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
员工工作表扬信
2015/05/05 职场文书
《观察物体》教学反思
2016/02/17 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript