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

WEB前端 waitig 574℃ 百度已收录 0评论

今天做一个网页页面定位的效果,业务如下:点击 A 按钮后页面跳转(滑动)到 B 元素;

基本实现如下步骤为:

  1. 获取 B 元素距离顶端的距离;
  2. 给按钮 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

本文由【waitig】发表在等英博客
本文固定链接:FE – 关于 document.body.scrollTop 和 document.documentElement.scrollTop 的小问题
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)