AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部

2023-08-09 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部

通过选择器寻找dom节点

document.getElementById('').getBoundingClientRect().top

通过ref获取到当前dom节点

e.target.getBoundingClientRect().top

展示效果



平滑的自动上拉到页面顶部

 window.scrollTo({
      top:0,
      behavior:"smooth"
    })
文章标签：
JavaScript
关键词：
dom节点
dom页面
与掉发不共戴天
目录
相关文章
游客44yag4ft7nckq
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
游客44yag4ft7nckq
53 17
游客44yag4ft7nckq
|
2月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
37 6
游客44yag4ft7nckq
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
33 3
游客44yag4ft7nckq
|
2月前
|
JavaScript
HTML DOM 节点
HTML DOM（文档对象模型）将HTML文档视为节点树，其中每个部分都是节点：文档本身是文档节点，HTML元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。节点间存在父子及同胞关系，形成层次结构。
游客44yag4ft7nckq
32 3
游客44yag4ft7nckq
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
游客44yag4ft7nckq
21 7
游客44yag4ft7nckq
|
2月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
33 2
游客44yag4ft7nckq
|
2月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
20 4
游客44yag4ft7nckq
|
2月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
37 15
游客44yag4ft7nckq
|
2月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
15 2
游客44yag4ft7nckq
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
游客44yag4ft7nckq
31 2