TIL59-01 스크롤 탑 버튼 만들기

스크롤 탑 버튼 만들기

• 스크롤 탑 버튼 만들기는 window.scrollTo()를 활용해 간단하게 만들 수 있다.
• 하지만 특정 레이아웃 안의 스크롤은 적용이 안되기 때문에 고민이 필요한 부분이었다.
• 리액트에서는 useRef 로 dom요소에 있는 값을 활용이 가능하기 때문에 이 방법을 이용해 특정 레이아웃의 스크롤도 조정이 가능했다.

const layoutRef = useRef();
    const topBtnHandler = () => {
        layoutRef.current.scrollTo({ top: 0, behavior: 'smooth' });
    };

• 위의 코드에서처럼 layout을 특정하고, 해당 레이아웃에 scrollTo를 이용해 top:0으로 스크롤 최상단으로 이동하게 했다.
• behavior: "smooth"를 통해 부드럽게 최상단으로 이동이 가능하다.