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

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

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

通过选择器寻找dom节点

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

通过ref获取到当前dom节点

e.target.getBoundingClientRect().top

展示效果



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

 window.scrollTo({
      top:0,
      behavior:"smooth"
    })
文章标签：
JavaScript
关键词：
dom节点
dom页面
与掉发不共戴天
目录
相关文章
游客44yag4ft7nckq
|
6天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时，我们常需提取各元素值，这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点，并输出它们的名称和值：例如 "title: Everyday Italian"，"author: Giada De Laurentiis" 和 "year: 2005"。实现步骤包括：加载XML字符串到xmlDoc对象，获取根元素子节点，然后遍历并输出每个子节点的信息。
游客44yag4ft7nckq
17 1
游客44yag4ft7nckq
|
8天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时，我们常需提取各元素值，这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点，并输出它们的名称和值：例如 "title: Everyday Italian"，"author: Giada De Laurentiis" 和 "year: 2005"。此例首先将XML字符串加载至xmlDoc中，接着获取根元素的子节点，并逐一输出每个子节点的信息。
游客44yag4ft7nckq
12 2
游客44yag4ft7nckq
|
8天前
|
存储 JavaScript
DOM 节点列表长度（Node List Length）
名为 "title" 的元素节点，并存储在节点列表 x 中。通过循环遍历节点列表，利用 length 属性确定列表中的节点数量，并依次访问每个节点的 childNodes[0]（即节点内的文本内容），将其输出到文档中。
游客44yag4ft7nckq
11 2
游客44yag4ft7nckq
|
10天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时，我们常需提取各元素值，这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点，并输出它们的名称和值：例如 "title: Everyday Italian"，"author: Giada De Laurentiis" 和 "year: 2005"。实现步骤包括：加载XML字符串到xmlDoc对象，获取根元素子节点，最后输出每个子节点的名称与文本节点的值。
游客44yag4ft7nckq
21 4
游客44yag4ft7nckq
|
10天前
|
存储 JavaScript
DOM 节点列表长度（Node List Length）
名为 "title" 的元素节点，并存储在节点列表 x 中。通过 "length" 属性确定 x 的长度（即 "title" 节点总数）。利用 for 循环遍历整个列表，访问每个 "title" 节点的第一个子节点的值，并将其写入文档。
游客44yag4ft7nckq
19 2
游客44yag4ft7nckq
|
13天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时，我们常需提取各元素值，这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点，并输出它们的名称和值：例如 "title: Everyday Italian"，"author: Giada De Laurentiis" 等。首先将XML字符串加载至xmlDoc，然后获取根元素的子节点列表并输出每个子节点的信息。
游客44yag4ft7nckq
26 5
游客44yag4ft7nckq
|
12天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时，我们常需提取各元素值，这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点，并输出它们的名称和值：例如 "title: Everyday Italian"，"author: Giada De Laurentiis" 等。
游客44yag4ft7nckq
24 1
游客44yag4ft7nckq
|
17天前
|
XML 存储 JavaScript
XML DOM - 访问节点
XML DOM 允许你访问XML文档中的每一个节点。你可以通过三种方式进行节点访问：使用 `getElementsByTagName()` 方法、循环遍历节点树或通过节点间的关系进行导航。`getElementsByTagName()` 返回一个节点列表，即节点的数组形式。示例代码展示了如何将 "books.xml" 文件加载到 `xmlDoc` 中，并随后在变量 `x` 中存储这些信息。
游客44yag4ft7nckq
17 6
游客44yag4ft7nckq
|
14天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
在处理XML文档时，我们常需提取各元素值，这时就要用到XML DOM的节点树遍历功能。以下示例展示了如何遍历根元素的所有子节点，并输出它们的名称和值：例如 "title: Everyday Italian"，"author: Giada De Laurentiis" 等。
游客44yag4ft7nckq
24 1
游客44yag4ft7nckq
|
18天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
遍历 XML 文档涉及循环或移动节点树以提取信息, such as element values. 下面的例子展示了如何遍历 XML 文档的子节点并显示它们的名称和值
游客44yag4ft7nckq
23 4