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

JavaScript经典效果集锦

Jul 06 Javascript

用JQuery模仿淘宝的图片放大镜显示效果

Sep 15 Javascript

一个通过script自定义属性传递配置参数的方法

Sep 15 Javascript

JavaScript实现按照指定长度为数字前面补零输出的方法

Mar 19 Javascript

AngularJS模块详解及示例代码

Aug 17 Javascript

socket.io学习教程之基本应用（二）

Apr 29 Javascript

jquery仿微信聊天界面

May 06 jQuery

javaScript手机号码校验工具类PhoneUtils详解

Dec 08 Javascript

微信小程序一周时间表功能实现

Oct 17 Javascript

Vue.js数字输入框组件使用方法详解

Oct 19 Javascript

JavaScript 禁止用户保存图片的实现代码

Apr 28 Javascript

JavaScript实现网页计算器功能

Oct 29 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代码

2011/11/27 PHP

PDO防注入原理分析以及注意事项

2015/02/25 PHP

修改WordPress中文章编辑器的样式的方法详解

2015/12/15 PHP

PHP 计算两个时间段之间交集的天数示例

2019/10/24 PHP

TP5框架简单登录功能实现方法示例

2019/10/31 PHP

Prototype使用指南之selector.js说明

2008/10/26 Javascript

javascript,jquery闭包概念分析

2010/06/19 Javascript

基于jQuery的360图片展示实现代码

2012/06/14 Javascript

jquery异步跨域访问代码

2013/06/28 Javascript

js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

2015/02/11 Javascript

Javascript中Array用法实例分析

2015/06/13 Javascript

JS获取数组最大值、最小值及长度的方法

2015/11/24 Javascript

Javascript中的数组常用方法解析

2016/06/17 Javascript

JavaScript正则表达式实例详解

2016/10/16 Javascript

vue-cli脚手架config目录下index.js配置文件的方法

2018/03/13 Javascript

jQuery扩展方法实现Form表单与Json互相转换的实例代码

2018/09/05 jQuery

使用vue-cli脚手架工具搭建vue-webpack项目

2019/01/14 Javascript

JavaScript实现图片上传并预览并提交ajax

2019/09/30 Javascript

JavaScript语法约定和程序调试原理解析

2020/11/03 Javascript

[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报

2015/05/27 DOTA

Python检测网站链接是否已存在

2016/04/07 Python

python定时利用QQ邮件发送天气预报的实例

2017/11/17 Python

Python结合ImageMagick实现多张图片合并为一个pdf文件的方法

2018/04/24 Python

python django下载大的csv文件实现方法分析

2019/07/19 Python

python实现吃苹果小游戏

2020/03/21 Python

Tensorflow tf.tile()的用法实例分析

2020/05/22 Python

Python正则re模块使用步骤及原理解析

2020/08/18 Python

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码

2020/02/27 HTML / CSS

HTML5 Canvas 破碎重组的视频特效的示例代码

2019/09/24 HTML / CSS

ProBikeKit英国：在线公路自行车之家

2017/02/10 全球购物

澳大利亚在线性感内衣商店：Fantasy Lingerie

2021/02/07 全球购物

酒店辞职书范文

2015/02/26 职场文书

兴趣班停课通知

2015/04/24 职场文书

歌咏比赛主持词

2015/06/29 职场文书

高温慰问简报

2015/07/21 职场文书

高一语文教学反思

2016/02/16 职场文书