【React】锚点效果实现（点击跳转定位位置）（内含demo）

最新推荐文章于 2025-04-01 08:30:00 发布

原创

最新推荐文章于 2025-04-01 08:30:00 发布

· 1.7w 阅读

8 ·

版权

文章标签：

#React锚点 #React #锚点 #React跳转定位 #锚点跳转定位实现

本文介绍了在React中如何实现锚点效果，由于React不支持原生锚点，提出了通过URL参数实现锚点定位的方法。详细步骤包括：在URL添加anchor参数，解析并检查是否有对应的id，然后滚动到相应位置。提供了JS代码示例和DEMO链接，解释了不使用scrollIntoView的原因，并介绍了锚点的实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

锚点：

超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。

那么问题来了

React不支持原生锚点的书写方式

所以怎么在React里实现类似锚点的效果

我的解题思路

1.在 url里使用 anchor 参数

2.页面解析是否有anchor参数对应的id

3.有对应id的话, 滚动到相应位置

代码实践

1.在 url里添加 anchor 参数

                                    <a link={child.link}>
                                      {child.name}
                                    </a>

2.页面解析是否有anchor参数对应的id

A.解析URL函数

  getURLStuff(stuff) {
    let url = window.location.hash;
    let query = url.split("?").length > 1 ? url.split("?")[1] : "";
    let param = !!query ? query.split("&") : [];
    let resultSet = {};
    for (let i =