编程 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 学习笔记（五）

Dec 31 Javascript

Jquery+WebService 校验账号是否已被注册的代码

Jul 12 Javascript

Javascript中的delete介绍

Sep 02 Javascript

探讨jQuery的ajax使用场景(c#)

Dec 03 Javascript

jQuery DOM插入节点操作指南

Mar 03 Javascript

js简单倒计时实现代码

Apr 30 Javascript

jQuery组件easyui基本布局实现代码

Aug 25 Javascript

微信小程序实现图片轮播及文件上传

Apr 07 Javascript

详解基于Vue，Nginx的前后端不分离部署教程

Dec 04 Javascript

vue实现的树形结构加多选框示例

Feb 02 Javascript

jQuery内容过滤选择器与子元素过滤选择器用法实例分析

Feb 20 jQuery

node中使用shell脚本的方法步骤

Mar 23 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

输出控制类

2006/10/09 PHP

PHP 第三节变量介绍

2012/04/28 PHP

改写函数实现PHP二维/三维数组转字符串

2013/09/13 PHP

php源码的安装方法和实例

2019/09/26 PHP

laravel5.5添加echarts实现画图功能的方法

2019/10/09 PHP

javascript之querySelector和querySelectorAll使用介绍

2011/12/20 Javascript

javascript单例模式的简单实现方法

2015/07/25 Javascript

漫谈JS引擎的运行机制你应该知道什么

2016/06/15 Javascript

Boostrap实现的登录界面实例代码

2016/10/09 Javascript

原生JS实现几个常用DOM操作API实例

2017/01/19 Javascript

CentOS 安装NodeJS V8.0.0的方法

2017/06/15 NodeJs

Javascript 严格模式use strict详解

2017/09/16 Javascript

vue 插值 v-once,v-text, v-html详解

2018/01/19 Javascript

angularjs性能优化的方法

2018/09/05 Javascript

微信小程序实现获取准确的腾讯定位地址功能示例

2019/03/27 Javascript

[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作

2014/06/24 DOTA

pygame学习笔记（5）：游戏精灵

2015/04/15 Python

简单介绍Python的Django框架加载模版的方式

2015/07/20 Python

Python 数据结构之旋转链表

2017/02/25 Python

浅谈python中的__init__、__new__和__call__方法

2017/07/18 Python

python微信跳一跳游戏辅助代码解析

2018/01/29 Python

解决pycharm无法调用pip安装的包问题

2018/05/18 Python

Python BS4库的安装与使用详解

2018/08/08 Python

Python 解决相对路径问题:"No such file or directory"

2020/06/05 Python

python自动化办公操作PPT的实现

2021/02/05 Python

ALDI奥乐齐官方海外旗舰店：德国百年超市

2017/12/27 全球购物

菲律宾购物网站：Lazada菲律宾

2018/04/05 全球购物

美国主要的特色咖啡和茶公司：Peet’s Coffee

2020/02/14 全球购物

简历中自我评价分享

2013/10/09 职场文书

高级销售员求职信

2013/10/25 职场文书

工商企业管理应届生求职信

2013/11/03 职场文书

说明书格式及范文

2014/05/07 职场文书

电话客服工作职责

2014/07/27 职场文书

初中信息技术教学计划

2015/01/22 职场文书

python 自动化偷懒的四个实用操作

2021/04/11 Python

Java如何实现通过键盘输入一个数组

2022/02/15 Java/Android