[React] 스크롤 top 버튼 기능 구현하기

 

스크롤을 맨 위로 올리는 top 버튼을 만들어보자!
생각보다 코드가 매우 간단하다.

 

 

 

---

 

 

 

 만들 예제의 완성본 

 

 

 

---

 

 

 1. 리스트 페이지를 만든다. 

 

 

 

 List.jsx 

import "./List.css";

const List = () => {


  const dummyList = [
    {
      id: 1,
      title: "1번",
    },
    {
      id: 2,
      title: "2번",
    },
    {
      id: 3,
      title: "3번",
    },
    {
      id: 4,
      title: "4번",
    },
    {
      id: 5,
      title: "5번",
    },
    {
      id: 6,
      title: "6번",
    },
    {
      id: 7,
      title: "7번",
    },
    {
      id: 8,
      title: "8번",
    },
    {
      id: 9,
      title: "9번",
    },
    {
      id: 10,
      title: "10번",
    },
  ];

  return (
    <div>
      <h1>List</h1>
      <div className="list-container">
        {dummyList.map((it) => (
          <div key={it.id}>
            <div className="list-box">{it.title}</div> 
          </div>
        ))}

      </div>
    </div>
  );
};

export default List;

 

 

---

 

 

 2. 스크롤 Top 컴포넌트를 만든다. 

 

 ScrollToTop.jsx

import "./ScrollToTop.css";
import TopButtonImg from "../../assets/top-button.png";

export function ScrollToTop() {
  
  // 클릭하면 스크롤이 위로 올라가는 함수
  const handleTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (
    <>
      <div className="top-btn-container">
        <button
          className="top-btn"
          onClick={handleTop} // 버튼 클릭시 함수 호출
        >
          <img
            src={TopButtonImg}
            alt="탑버튼 아이콘"
            style={{ width: "80px", height: "80px" }}
          />
        </button>
      </div>
    </>
  );
}

 

 

---

 

 

 3. 스크롤 Top 컴포넌트를 스타일링 한다. 

 

 ScrollToTop.css 

.top-btn-container {
  position: fixed;
  width: 100%;
  bottom: 13%;
  right: 2%;
  z-index: 1000;
}


.top-btn{
  position: absolute;
  border: 0;
  background:transparent;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}


.top-btn:focus{ 	
  border: none;
  outline:none;
  }

 

 

 

---

 

 

 완성본