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

锚点：

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

那么问题来了

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 = 0; i < param.length; i++) {
      let params = param[i].split("=");
      if (params.length > 1) {
        resultSet[params[0]] = params[1];
      }
    }
    let result = resultSet[stuff] || "";
    return decodeURI(result);
  }

B.获取anchor对应的值

    let anchor = this.getURLStuff("anchor");
    console.log("nlp anchor ", anchor);

3.有对应id的话, 滚动到相应位置，没有的话，滚动到头部

html 代码：

        <div className="basic-feature-title" id={info.anchor}>
          {info.title}
        </div>

JS代码:

 // 对应id的话, 滚动到相应位置
    if (!!anchor) {
      let anchorElement = document.getElementById(anchor);
      if (anchorElement) {
        window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2);
      }
    }
    // 没有的话，滚动到头部
    else {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

注意：

这里没有使用 scrollIntoView 主要是滚动效果不理想，只会滚动到可视区域，不一定会到页面正中，所以建议使用下列代码

window.scrollTo(0, anchorElement.offsetTop - window.innerHeight / 2);

惯例上DEMO:

codepen链接

PS: 由于codepen内嵌iframe所以没办法用url调整，我用state做了个大致的效果，大家可以参考下~

原理：

锚点实现原理是:target选择器

感兴趣的同学可以点击下方参考链接继续学习：

1.URL锚点HTML定位技术机制、应用与问题

2.CSS3 :target 选择器