FE - 关于 document.body.scrollTop 和 document.documentElement.scrollTop 的小问题

最新推荐文章于 2022-06-07 00:53:19 发布

原小明

最新推荐文章于 2022-06-07 00:53:19 发布

阅读量565

点赞数

文章标签： document scrolltop body

本文链接：https://blog.csdn.net/LABLENET/article/details/78329251

版权

今天做一个网页页面定位的效果，业务如下：点击 A 按钮后页面跳转（滑动）到 B 元素；

基本实现如下步骤为：

获取 B 元素距离顶端的距离；
给按钮 A 添加点击事件，然后将 document 的 scrollTop 设置为 B 元素距离顶端的距离；

   let anchor = this.$el.querySelector('#B')
   document.documentElement.scrollTop = anchor.offsetTop

在设置上出现了问题，开始使用的是：

 let anchor = this.$el.querySelector('#B')
 // 这里怎么设置都不行，效果无法实现
 document.body.scrollTop = anchor.offsetTop

后查阅相关资料，说是 W3C 标准，即当页面指定了DTD，即指定了DOCTYPE时，就要使用

 // <!DOCTYPE html>
 document.documentElement.scrollTop

当页面没有指定 DTD 的时候，就使用

document.body.scrollTop

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

原小明

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JS-删除节点removeChild()/替换元素节点replaceChild()/创建元素节点createElement/创建文本节点createTextNode/浏览器窗口可视区域大小/网页......

Jennyni1122的博客

06-18

1451

删除节点removeChild() removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。语法: nodeObject.removeChild(node) 参数: node ：必需，指定需要删除的节点。我们来看看下面代码，删除子点。 image.png 运行结果: HT...

淘宝首页原生js练习(基础练习的基础中的基础)

weixin_51444162的博客

04-06

7208

仿照淘宝首页使用原生js和node.js后端数据结合，实现本地数据请求渲染。

参与评论您还未登录，请先登录后发表或查看评论

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

10-18

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

document.body.scrollTop与document.documentElement.scrollTop

qq_38402659的博客

03-12

1039

在获取滚动高度的时候，使用document.body.scrollTop发现得到的值始终为0，于是引出了document.documentElement.scrollTop。在不同的浏览器中，有些能识别document.body.scrollTop，有些能识别document.documentElement.scrollTop。如果document.body.scrollTop为0则documen...

document.body.scrollTop与document.documentElement.scrollTop区别

NotBad_的博客

08-26

1617

document.body.scrollTop与document.documentElement.scrollTop都是获取滚动条滚动的距离，由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop 都有可能取不到值，但是这两个方法有一个特点：两个方法同时使用只有一个值有效，比如document.body

document.body.scrollTop 与 document.documentElement.scrollTop 的区别和使用

Warrior 技术大杂论

04-07

628

当网站声明为时，document.body.scrollTop 的值没有变化，一直为0。解决办法：用 document.documentElement 替换掉 javascript 中的 document.body 。因此在使用 document.body.scrollTop 时不能为网页声明 DOCTYPE 类型，对于声明了DOCTYPE 类型的网页则使用 document.documentElement.scrollTop 就行。

去哪儿项目总结

a_18338878525的博客

06-07

421

Vue项目：基础 webapp首页模块城市列表页列表页-》详情页公共图片 css部分 stylus（scss less）环境准备1： https://piao.qunar.com/touch 参考网站是多页应用MPA 但我们用vue写SPAwebapp SPA 仿写去哪儿1：移动端项目开发环境准备：安装nodejs 验证 node -v npm -v 注册码云 https://gitee.com/ 代码版本管理国内快速简单

vue实现移动端可拖拽浮动球按钮

一梦晓三生的博客

12-23

959

vue实现移动端可拖拽浮动球按钮 <template> <transition> <div ref="dragIcon" class="dragIcon" @click="onBtnClicked" @touchstart.stop="handleTouchStart" @touchmove.prevent.stop="handleTouchMove($event)" @touchend.stop="handleTouchEnd" :style="{le

【2022跨年】最浪漫的表白烟花，送给新的一年的自己（源码）

热门推荐

m0_67391121的博客

03-06

3万+

先建立一个images文件夹：放入一张小表情图片：a8.png jquery.min.js： /*! jQuery v2.0.0 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license //@ sourceMappingURL=jquery.min.map */ (function(e,undefined){var t,n,r=typeof undefined,i=e.location,o=e.document,s=o.document.

JS基础篇-- body.scrollTop与documentElement.scrollTop

weixin_33912246的博客

01-10

211

获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop 获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft 1.各浏览器下 scrollTop的...

document.documentElement.scrollTop与document.body.scrollTop

Fair_feng的博客

04-28

1657

问题针对document.documentElement.scrollTop和document.body.scrollTop. 1、在IE Firefox Opera 现代浏览器的标准模式下，使用document.documentElement.scrollTop获取高度，混杂模式下，也就是没有DTD文档声明，则使用document.body.scrollTop. 2、Chrome Safari

安卓-微信 document.body.scrollTop为0 的解决

weixin_44218877的博客

11-25

567

安卓-微信内置浏览器和第三方浏览器获取滚动条位置失效解决

javascript)再说document.body.scrollTop的使用问题

u011486755的专栏

01-15

493

今天在网上搜索了一下仿造msn提示新信息的代码，还是一堆代码，但是直到使用仿造msn信息提示这篇文章提出的代码的时候才发现，原来看似正确的代码其实真正运行往往会事与愿违。照这个代码在ie6下运行提示对话框却是出现在右上角。单步调试了下，初步确定还是类似我前面写的获取鼠标事件发生时候的位置一文提到的代码兼容问题，于是我将原文使用document.body.scrollTop的地方全部用 var

js scrollTop兼容性问题--document.body.scrollTop与document.documentElement.scrollTop

renxing518的博客

07-19

2490

1、各浏览器下 scrollTop的差异 IE6/7/8：对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度；对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ； Safari: safari 比较特别，有自己获取scrollTop的函数： w

不改变路径兼容浏览器的锚点定位

qq_39598092的博客

06-19

258

在定位的位置上面添加 id="name" 唯一在点击的地方添加点击事件 goAnchor floorClassification: [], //楼层分类 goAnchor(selector) { var anchor = this.$el.querySelector(selector); var ua = navigator.user...

移动端html锚点,vue实现锚点定位，移动端同样适用

weixin_26851099的博客

07-06

933

本来首先想到的就是用a链接进行锚点跳转，但是a链接会产生新的路由，为了防止对项目产生影响就使用了js进行操控滚动条的滑动，下面是一个小demo！一。html代码{{item}}{{item}}//用5只是举个例子二。css代码body, html {scroll-behavior: smooth;//平滑滚动到相应位置height: 100%;}.box {width: 90%;margin: 0...

收集关于scrollTop信息

weixin_30678349的博客

04-13

390

要获取当前页面的滚动条纵坐标位置，用： document.documentElement.scrollTop; 而不是： document.body.scrollTop; documentElement 对应的是 html 标签，而 body 对应的是 body 标签。在标准w3c下，document.body.scrollTop恒为0，需要用doc...

document.documentElement.scrollTop 在安卓失效

qq_38803953的博客

08-02

1747

相比很多人在用document.documentElement.scrollTop(获取滚动条位置)来做上拉加载的时候都会遇到很奇怪的问题。在谷歌里面测试完完全全可以使用，而且上线到手机端的时候，为什么就失效了。主要是因为documentElement在安卓里面比较不支持。解决方法： var a = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset; (||必须加） ...

let top = document.documentElement.scrollTop || document.body.scrollTop为啥写两个怎么理解