nav 클릭 시 원하는 섹션으로 스크롤 이동 Anchor Scroll

nav를 클릭했을 때 

해당 섹션 위치로 이동하는 것을 만들어보고 싶었다.

export default function About() {
  return (
    <main 
      id="AboutMe" 
      className="relative h-screen snap-start"
    >

 

우선 해당 섹션에 id를 작성한다.

id에 따라 target을 설정할 것이다.

export interface navType {
  id: string;
  label: string;
  target: string;
}

const nav = [
  { id: "01.", label: "About", target: "AboutMe" },
  { id: "02.", label: "Skills", target: "Skill" },
  { id: "03.", label: "Projects", target: "Projects" },
  { id: "04.", label: "Experience", target: "Experience" },
  { id: "05.", label: "Contact", target: "Contact" },
];

 

앞서 설정한 id를 nav에 있는 target에 넣어준다.

nav를 클릭했을 때 해당 위치로 이동하게 만들 것이다.

const handleClick = (target: string) => {
    document.getElementById(target)?.scrollIntoView({
      behavior: "smooth",
      block: "start",
    })
  };

 

해당 nav에 onClick()을 적고 다음과 같이 작성한다.

document.getElementById(target)로 id가 target인 DOM 요소를 찾는다.

?.scrollIntoView(...)으로 id가 존재할 때만 실행되게 한다.

.scrollIntoView(options)으로 해당 요소가 화면에 보이도록 스크롤한다.

behaviro: "smooth"로 부드럽게 이동시킨다. auth면 바로 이동된다.

block: "start"로 대상 요소의 위쪽을 뷰포트의 위쪽에 맞춘다.