Skip to content

Commit

Permalink
Scroll To Top button added
Browse files Browse the repository at this point in the history
  • Loading branch information
AbhijitMotekar99 committed Nov 6, 2024
1 parent d8aeec8 commit 6b4b8c9
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 1 deletion.
1 change: 1 addition & 0 deletions frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DecenTrade | NFT Marketplace</title>
</head>
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import Footer from './components/Footer';
import MyChatbot from './Chatbot';
import CustomCursor from './components/CustomCursor';
import GTranslateLoader from './components/GTranslateLoader'

import ScrollToTop from './components/ScrollToTop';

function App() {
const [wallet, setWallet] = useState(null);
Expand Down Expand Up @@ -55,6 +55,7 @@ function App() {
{/* Chatbot and Footer Components */}
<MyChatbot />
<Footer />
<ScrollToTop />
</div>
<GTranslateLoader />
</BrowserRouter>
Expand Down
33 changes: 33 additions & 0 deletions frontend/src/components/ScrollToTop.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React, { useEffect, useState } from "react";
import "../styles/ScrollToTop.css"; // Import the CSS file

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

useEffect(() => {
const toggleVisibility = () => {
if (window.scrollY > 100) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};

window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);

const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};

return (
isVisible && (
<div className="scroll-top" onClick={scrollToTop}>
<i className='bx bx-chevron-up arrow-up'></i>
</div>
)
);
};

export default ScrollToTop;
41 changes: 41 additions & 0 deletions frontend/src/styles/ScrollToTop.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.scroll-top {
height: 60px;
width: 60px;
position: fixed;
bottom: 10px;
right: 20px;
margin-right: 60px;
padding: 10px;
cursor: pointer;
display: none;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: linear-gradient(90deg, #4a90e2, #9013fe);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
animation: float 2s ease-in-out infinite;
}

.scroll-top:hover {
background: linear-gradient(90deg,#9013fe, #4a90e2);
animation-play-state: paused;
}

.scroll-top i {
font-size: 40px;
font-weight: 700;
color: #fff;
}

@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

0 comments on commit 6b4b8c9

Please sign in to comment.