특정 섹션으로 스크롤 & url 수정

miin·2025년 5월 27일
0

Skill Collection [Function]

목록 보기
49/49

타 컴포넌트에서 버튼 클릭시
원하는 페이지로 이동 후 특정 섹션으로 스크롤 하기

//component
<button
onClick={() => router.push("/?scroll=bottom")} >click
</button>


//main
const searchParams = useSearchParams();
useEffect(() => {
     const shouldScroll = searchParams.get('scroll') === "bottom";
 
 //특정 섹션으로 스크롤
     if (shouldScroll) {
       setTimeout(() => {
         scrollRef.current?.scrollIntoView({ behavior: "smooth" });
       }, 100);

 //바로 url delete로 새로고침시 재 스크롤 되지않게 변경
       const url = new URL(window.location.href);
       url.searchParams.delete("scroll");
       router.replace(url.pathname, { scroll: false });
     }
   
 }, [searchParams]);

0개의 댓글