From 6b4b8c934bdc773272509b4788cab8768f7c56a3 Mon Sep 17 00:00:00 2001
From: Abhijit Motekar <109235675+AbhijitMotekar99@users.noreply.github.com>
Date: Wed, 6 Nov 2024 20:58:21 +0530
Subject: [PATCH] Scroll To Top button added
---
frontend/index.html | 1 +
frontend/src/App.jsx | 3 +-
frontend/src/components/ScrollToTop.jsx | 33 ++++++++++++++++++++
frontend/src/styles/ScrollToTop.css | 41 +++++++++++++++++++++++++
4 files changed, 77 insertions(+), 1 deletion(-)
create mode 100644 frontend/src/components/ScrollToTop.jsx
create mode 100644 frontend/src/styles/ScrollToTop.css
diff --git a/frontend/index.html b/frontend/index.html
index b69909d..2ddd2c0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,7 @@
+
DecenTrade | NFT Marketplace
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9848b58..9b9f027 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -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);
@@ -55,6 +55,7 @@ function App() {
{/* Chatbot and Footer Components */}
+
diff --git a/frontend/src/components/ScrollToTop.jsx b/frontend/src/components/ScrollToTop.jsx
new file mode 100644
index 0000000..dad696c
--- /dev/null
+++ b/frontend/src/components/ScrollToTop.jsx
@@ -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 && (
+
+
+
+ )
+ );
+};
+
+export default ScrollToTop;
diff --git a/frontend/src/styles/ScrollToTop.css b/frontend/src/styles/ScrollToTop.css
new file mode 100644
index 0000000..eeaa291
--- /dev/null
+++ b/frontend/src/styles/ScrollToTop.css
@@ -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);
+ }
+}