페이지의 특정 부분으로 스크롤하는 방법

구현 중에 버튼을 누르면 해당부분으로 자동으로 스크롤하게 하는 기능을 구현하게 되었다.

스크롤하게 하는 기능은 같은 페이지 내에서도 가능하고
다른 페이지로 이동한 후 해당 부분으로 스크롤하게 할 수 있다.

 

페이지 내에서 특정 부분으로 스크롤해주는 것은 사소한 부분일지라도
유저에게는 매우 편리한 기능이기에 알아두면 좋을 거 같다.

case 1. 같은 페이지일 때 해당 부분으로 스크롤하기

같은 페이지 내에서 해당 부분으로 스크롤하는 방법은 간단하다.

<div>
    <button href="#a">a부분으로 스크롤</button>
    
    <div id="a">a부분</div>
</div>

이 예시에서는 'a부분으로 스크롤' 버튼을 누르면 해당 부분으로 스크롤된다.
이는 간단한 해시 값을 활용한 스크롤 이동이다.

---

case 2. 다른 페이지로 이동해서 해당 부분으로 스크롤하기

다른 페이지로 이동한 후 해당 부분으로 스크롤하는 방법이다.

 

- Home 페이지

Home 페이지에서 'detail 페이지로 이동 후 a 부분으로 스크롤' 링크를 제공해주자.

<link to="/home/detail/#a">detail페이지로 이동 후 a부분으로 스크롤</link>

- Detail 페이지

Detail 페이지에서useEffect 훅을 활용하여
URL의 해시 값이 변경될 때 해당 부분으로 스크롤하는 기능을 구현하자.

import React, { useEffect } from 'react';

function DetailPage() {
  useEffect(() => {
    const handleHashScroll = () => {
      const { hash } = window.location;
      if (hash) {
        const element = document.querySelector(hash);
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        }
      }
    };

    handleHashScroll();

    window.addEventListener("hashchange", handleHashScroll);
    return () => {
      window.removeEventListener("hashchange", handleHashScroll);
    };
  }, []);

  return (
    <div>
      {/* ... (다른 컴포넌트 및 내용) */}
      <div id="a">a부분</div>
    </div>
  );
}

export default DetailPage;

페이지가 로드되거나 URL의 해시 값이 변경될 때 handleHashScroll 함수를 실행하여 원하는 부분으로 스크롤한다.
다른 페이지로 이동하더라도 원하는 부분으로 자동으로 스크롤된다 : )