Ref實現導航滾動定位

摘要

　　在開發項目中時常有點擊跳轉滾動到錨點的需求，最簡單的錨點定位就是給一個a標簽，a標簽的href = ‘#錨點’，然後給需要跳轉的錨點一個id = ‘錨點’。參考最簡單的錨點跳轉實現方式，在React中使用useRef來實現跳轉錨點的功能。

功能具體步驟

1、創建空的Ref　　

import React, { useRef } from 'react';

const Layout = () => {
    const pageTopRef = useRef(null);
    const sectionEventInfoRef = useRef(null);

  return (
      <div>滾動內容</div>
  )  
}

2、跳轉錨點函數

　　Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器視窗的可視區域內。我們可以利用該方法搭配Ref實現跳轉錨點的功能，behavior屬性可以定義動畫過渡效果，跳轉錨點時滾動效果平滑些。具體代碼代碼如下：

  // 點擊導航按鈕，滾動到頁面中相對應的區域
  const handleClickNavItem = ref => {
    setIsWork(false);
    if (ref.current) {
      ref.current.scrollIntoView({ behavior: "smooth" });
    }
  }

3、錨點

 　　bind()綁定ref，錨點處在綁定對應跳轉ref，簡化式代碼如下所示：

import React, { useRef } from 'react';
import '../style.scss';

const Layout = () => {
  const pageTopRef = useRef(null);
  const sectionEventInfoRef = useRef(null);

  // 點擊導航按鈕，滾動到頁面中相對應的區域
  const handleClickNavItem = ref => {
    if (ref.current) {
      ref.current.scrollIntoView({ behavior: "smooth" });
    }
  }

  return (
    <div className="activity-area">
      <div className="actAr-wrapper">
        <div className="actAr-tabs">
          <button onClick={handleClickNavItem.bind(null, pageTopRef)}>首頁</button>
          <button onClick={handleClickNavItem.bind(null, sectionEventInfoRef)}>活動詳情</button>
          <button onClick={openEWorks}>精選作品</button>
        </div>
        <div className="actAr-content">
          <!-- 錨點一 -->
          <div ref={pageTopRef}>
            回到首頁的錨點
          </div>
          <!-- 錨點二 -->
          <div ref={sectionEventInfoRef}>
            活動詳情的錨點
          </div>
        </div>
      </>
    </div>
  )
}

export default Layout;