diff --git a/src/components/common/button/TopButton.js b/src/components/common/button/TopButton.js new file mode 100644 index 0000000..d9ba237 --- /dev/null +++ b/src/components/common/button/TopButton.js @@ -0,0 +1,65 @@ +import React, { useState, useEffect } from 'react'; +import styled from 'styled-components'; + +const Button = styled.button` + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #666666; + color: white; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: ${props => (props.visible ? '1' : '0')}; + visibility: ${props => (props.visible ? 'visible' : 'hidden')}; + transition: opacity 0.3s, visibility 0.3s; + border: none; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2); + z-index: 999; + + &:hover { + background-color: #333333; + } +`; + +const TopButton = () => { + const [visible, setVisible] = useState(false); + + useEffect(() => { + const toggleVisibility = () => { + if (window.pageYOffset > 300) { + setVisible(true); + } else { + setVisible(false); + } + }; + + window.addEventListener('scroll', toggleVisibility); + + return () => window.removeEventListener('scroll', toggleVisibility); + }, []); + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }; + + return ( + + ); +}; + +export default TopButton; \ No newline at end of file diff --git a/src/components/common/index.js b/src/components/common/index.js index fdc99b5..93450aa 100644 --- a/src/components/common/index.js +++ b/src/components/common/index.js @@ -14,6 +14,7 @@ import Pagination from './Pagination/Pagination'; import ViewTableInfo from './Table/ViewTableInfo'; import Loading from './Loading'; import CDivider from './CDivider'; +import TopButton from './button/TopButton'; export { DatePickerComponent, DateTimeRangePicker, @@ -38,5 +39,6 @@ export { DateTimeInput, Pagination, ViewTableInfo, Loading, - CDivider + CDivider, + TopButton }; \ No newline at end of file