HTML anchor로 scroll to top 기능 구현 가능하다.

<a href="#top"> scroll to top </a>

이렇게만 하면 anchor 클릭시, 꼭대기로 슉 순간이동 하는데 그다지 보기 좋지않다.

✨ CSS

javascript 도움 없이, css로 스르륵 Scroll to top 만들 수도 있다.

참고

화면 아래에 위치한 버튼에 position: sticky 심는 방식인데, 이게 골치아프다.

✨ React

음청 간단하다.

To the top

import React, { useState } from "react";
import styled from "styled-components";

const Bottom = styled.div`
	position: fixed;
  	bottom: 3.5vh;
`

export default function ScrollToTop() {
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };
  return (
    <Bottom>
        <div onClick={scrollToTop}>
          <h3>Go up!</h3>
        </div>
    </Bottom>
  );
}

Bottom이 몇몇px 이후에 등장했으면 좋겠다?

const [isVisible, setIsVisible] = useState(false);

useEffect(() => {
  const toggleVisibility = () => {
    if (window.pageYOffset > 500) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };
  window.addEventListener("scroll", toggleVisibility);
  return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

끝

To an element

위처럼 top:0하면 꼭대기로 가고 element id까지 이동시켜보자

import React, { useState } from "react";

export default function ScrollToSth() {
  const scrollToSth = () => {
    const element = document.getElementById('sth');
    if (element) {
      element.scrollIntoView({ 
        behavior: 'smooth'
      });
    }
  };

  return (
    <>
      <button onClick={ScrollToSth}>
    	button
      </button>
      <div id="sth">Section 1</div>
    </>
  );
}

개꿀