[React] 누르면 맨위로 움직이는 스크롤 버튼 만들기 top 버튼

안녕하세요. 슈입니다.오늘은 리액트로 누르면 맨위로 움직이는 스크롤 버튼 만드는 법을

알려드릴게요.

흔히 top 버튼이라고 하죠?

위에처럼 생긴 버튼 누르면 쉽게 화면 가장 위로 움직여주는 버튼입니다.

 

저는 따로 ScrollBtn.js 라는 파일을 만들어서

그안에 코드를 적어줬어요.

반응형으로 만들었습니다!!

화면 크기에 따라 버튼의 크기나 위치도 바뀔거에요.

import React, { useEffect, useState } from 'react';
import { SlArrowUpCircle } from "react-icons/sl";
import styled from 'styled-components';


const Div = styled.div`

/* 미디어 쿼리: 화면 가로폭이 1000px 미만일 때 */
@media screen and (max-width: 1000px) {
    bottom:50px;
    right:10px;
}
/* 미디어 쿼리: 화면 가로폭이 1000px 이상일 때 */
@media screen and (min-width: 1000px) {
    bottom:40px;
    right:20px;
}
z-index:999;
position:fixed;


#btn{
    border-radius:50px;
    cursor:pointer;
    background-color: #fff;
}
#btn:hover{
    transition: 0.4s ease-in-out;
    background-color:rgba(0,0,0,0.9);
    color:white;

}
`
const ScrollBtn = () => {
    const [iconSize, setIconSize] = useState(window.innerWidth < 768 ? '40px' : '60px');

    const handleResize = () => {
        setIconSize(window.innerWidth < 768 ? '40px' : '60px');
      };
      useEffect(() => {
        window.addEventListener('resize', handleResize);
        return () => {
          window.removeEventListener('resize', handleResize);
        };
      }, []);
    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      };
    return (
        <Div>
            <SlArrowUpCircle id='btn' onClick={scrollToTop} size={iconSize}/>
        </Div>
    );
};

export default ScrollBtn;

그다음에

이 컴포넌트를

import React from 'react';
import Main from '../components/Main';
import Header from '../common/Header';
import Wrapper from '../common/Wrapper';
import Footer from '../common/Footer';
import ScrollBtn from '../common/ScrollBtn';

const MainPage = () => {
    return (
        <Wrapper>
            <ScrollBtn/>
            
            <Header/>
          
            <Main/>
          
            <Footer/>
        </Wrapper>
    );
};

export default MainPage;

이렇게원하는 페이지의 상단에 위치시켜주면

작동한답니다!!

오늘은 누르면 맨위로 움직이는 스크롤 버튼 만들기 top 버튼 에대해

알려드렸는데요!

도움이되시길 바랍니다!