编程 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宝典学习笔记

Feb 07 Javascript

JavaScript的变量作用域深入理解

Oct 25 Javascript

避免 showModalDialog 弹出新窗体的原因分析

May 31 Javascript

JavaScript高级程序设计阅读笔记（二十） js错误处理

Aug 14 Javascript

node.js实现BigPipe详解

Dec 05 Javascript

浅析javascript中的Event事件

Dec 09 Javascript

jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】

Dec 19 Javascript

vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

Jul 12 Javascript

Vuejs开发环境搭建及热更新【推荐】

Sep 07 Javascript

vue+echarts实现动态绘制图表及异步加载数据的方法

Oct 17 Javascript

layui点击弹框页面表单请求的方法

Sep 21 Javascript

javascript实现雪花飘落效果

Aug 19 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

phpcms模块开发之swfupload的使用介绍

2013/04/28 PHP

php实现的Cookies操作类实例

2014/09/24 PHP

php制作简单模版引擎

2016/04/07 PHP

php metaphone()函数的定义和用法

2016/05/15 PHP

JavaScript加密解密7种方法总结分析

2007/10/07 Javascript

php gethostbyname获取域名ip地址函数详解

2010/01/24 Javascript

js 动态文字滚动的例子

2011/01/17 Javascript

js FLASH幻灯片字符串中有连接符＆的处理方法

2012/03/01 Javascript

jQuery中关于ScrollableGridPlugin.js（固定表头）插件的使用逐步解析

2014/07/17 Javascript

jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析

2016/06/08 Javascript

Angular2 (RC4) 路由与导航详解

2016/09/21 Javascript

javascript实现根据函数名称字符串动态执行函数的方法示例

2016/12/28 Javascript

vuejs使用FormData实现ajax上传图片文件

2017/08/08 Javascript

详细分析单线程JS执行问题

2017/11/22 Javascript

详解webpack-dev-server使用方法

2018/09/14 Javascript

vue-router启用history模式下的开发及非根目录部署方法

2018/12/23 Javascript

js实现跟随鼠标移动的小球

2019/08/26 Javascript

Vue使用axios引起的后台session不同操作

2020/08/14 Javascript

[01:21]DOTA2 新英雄森海飞霞

2020/12/18 DOTA

总结python爬虫抓站的实用技巧

2016/08/09 Python

Python列表和元组的定义与使用操作示例

2017/07/26 Python

Python实现的中国剩余定理算法示例

2017/08/05 Python

python+matplotlib实现礼盒柱状图实例代码

2018/01/16 Python

pandas dataframe的合并实现（append, merge, concat）

2019/06/24 Python

Python collections模块的使用方法

2020/10/09 Python

几个CSS3的flex弹性盒模型布局的简单例子演示

2016/05/12 HTML / CSS

Otticanet澳大利亚：最顶尖的世界名牌眼镜, 能得到打折季的价格

2018/08/23 全球购物

英国领先的隐形眼镜在线供应商：Lenstore.co.uk

2019/11/24 全球购物

视光学毕业生自荐书范文

2014/02/13 职场文书

课前一分钟演讲稿

2014/08/26 职场文书

学生检讨书范文

2015/01/27 职场文书

2015年计划生育责任书

2015/05/08 职场文书

健康证明

2015/06/19 职场文书

2016大学生国家助学贷款承诺书

2016/03/25 职场文书

MySQL数据库如何给表设置约束详解

2022/03/13 MySQL

Nginx工作模式及代理配置的使用细节

2022/03/21 Servers