錨點：

超連結的一種形式，快速定位到想要看的位置，常用在文章目錄等位置。

那麼問題來了

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:

PS: 由於codepen內嵌iframe所以沒辦法用url調整，我用state做了個大致的效果，大家可以參考下~

原理：

錨點實現原理是:target選擇器

感興趣的同學可以點選下方參考連結繼續學習：