[React] 특정 DOM 요소로 스크롤 이동하기

React의 useRef로 간단하게 특정 DOM 요소로 이동할 수 있다.

1. 디자인 구현

먼저 아래와 같은 간단한 디자인을 구현했다.

우측 상단에 navigation을 클릭하면 해당 content로 이동하는 구조이다.

import React from 'react'

export default function App() {
  return (
    <div>
      <ul style={{position: "fixed", top: 0, right: 0, background: 'teal', padding: "20px"}}>
        <li>content1</li>
        <li>content2</li>
        <li>content3</li>
      </ul>

      <div style={{height:'500px', background: 'skyblue'}}>content1</div>
      <div style={{height:'500px', background: 'orange'}}>content2</div>
      <div style={{height:'500px', background: 'gray'}}>content3</div>
    </div>
  )
}

2. 스크롤 이동 구현

useRef와 onClick 함수를 추가해준다.

useRef는 특정 DOM을 선택해서 조작할 수 있도록 해주는 React의 Hook이다.

import React, {useRef} from 'react'

export default function App() {
  const content1Ref = useRef<HTMLDivElement>(null);
  const content2Ref = useRef<HTMLDivElement>(null);
  const content3Ref = useRef<HTMLDivElement>(null);

  const onContent1Click = () => {
    content1Ref.current?.scrollIntoView({ behavior: 'smooth' });
  }
  const onContent2Click = () => {
    content2Ref.current?.scrollIntoView({ behavior: 'smooth' });
  }
  const onContent3Click = () => {
    content3Ref.current?.scrollIntoView({ behavior: 'smooth' });
  }

  return (
    <div>
      <ul style={{position: "fixed", top: 0, right: 0, background: 'teal', padding: "20px"}}>
        <li onClick={onContent1Click}>content1</li>
        <li onClick={onContent2Click}>content2</li>
        <li onClick={onContent3Click}>content3</li>
      </ul>

      <div ref={content1Ref} style={{height:'500px', background: 'skyblue'}}>content1</div>
      <div ref={content2Ref} style={{height:'500px', background: 'orange'}}>content2</div>
      <div ref={content3Ref} style={{height:'500px', background: 'gray'}}>content3</div>
    </div>
  )
}

scrollIntoView 메소드는 호출된 요소가 사용자에게 표시되도록 해당 위치로 스크롤한다.

우측에 content2 navigation을 클릭하면 content2로 이동되는 것을 확인할 수 있다.

 

3. a 태그로 같은 페이지에서 특정 위치로 이동하기

import React from 'react'

export default function App() {

  return (
    <div>
      <ul style={{position: "fixed", top: 0, right: 0, background: 'teal', padding: "20px"}}>
        <li><a href='#content1'>content1</a></li>
        <li><a href='#content2'>content2</a></li>
        <li><a href='#content3'>content3</a></li>
      </ul>

      <div id="content1" style={{height:'500px', background: 'skyblue'}}>content1</div>
      <div id="content2" style={{height:'500px', background: 'orange'}}>content2</div>
      <div id="content3" style={{height:'500px', background: 'gray'}}>content3</div>
    </div>
  )
}

href에 #(요소의)id를 입력해주면 간단하게 이동이 가능하다.