반응형
안녕하세요. 슈입니다.오늘은 리액트로 누르면 맨위로 움직이는 스크롤 버튼 만드는 법을
알려드릴게요.
흔히 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 버튼 에대해
알려드렸는데요!
도움이되시길 바랍니다!
반응형
'코딩공부' 카테고리의 다른 글
[React] 깃허브페이지 github page 404에러, url 새로고침 404에러 문제해결 (0) | 2024.06.16 |
---|---|
프론트엔드 기술 면접,인터뷰에 자주 나오는 예상질문과 답변 정리 공유! (1) | 2024.06.13 |
[python] 파이썬 크롬드라이브 설정,세팅 | 크롤링 크롬드라이버 (0) | 2024.06.11 |
[python ] 엑셀 파일 csv 한글 깨질 때 , 인코딩하기 (0) | 2024.06.11 |
[React] css 스타일 주는법 , styled-components 를 이용한 스타일 (0) | 2024.06.10 |