Scroll to top desing and implementation

Author: realstoman

src/App.js

@@ -9,6 +9,7 @@ import Home from './pages/Home';
 import Projects from './pages/Projects';
 import ProjectSingle from './pages/ProjectSingle';
 import { AnimatePresence } from 'framer-motion';
+import UseScrollToTop from './hooks/useScrollToTop';
 
 function App() {
 	return (
@@ -30,6 +31,7 @@ function App() {
 					</Routes>
 					<AppFooter />
 				</Router>
+				<UseScrollToTop />
 			</div>
 		</AnimatePresence>
 	);

src/components/ScrollToTop.js

@@ -1,3 +1,6 @@
+// NOTE: This scroll to top is the default react scroll to top behavior when visiting a new route.
+// For the scroll to top behavior on a click event I have create a custom hook with the name of useScrollToTop under the hooks folder.
+
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 

src/css/App.css

@@ -1,38 +1,67 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* Scroll to top style */
+.scrollToTop {
+	@apply bg-indigo-600;
+	@apply text-white;
+	position: fixed;
+	width: 100%;
+	align-items: center;
+	height: 20px;
+	justify-content: center;
+	z-index: 999;
+	cursor: pointer;
+	animation: fadeIn 0.3s;
+	transition: opacity 0.4s;
+	opacity: 0.5;
+}
+
+.scrollToTop:hover {
+	opacity: 1;
+}
+
+@keyframes fadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0.5;
+	}
 }

src/hooks/useScrollToTop.js

@@ -1,13 +1,22 @@
-import { useState } from 'react';
-import { FIChevronUp } from 'react-icons/fi';
+// NOTE: This scroll to top is the actual working scroll to to when user clicks
+
+import { useState, useEffect } from 'react';
+import { FiChevronUp } from 'react-icons/fi';
 
 const useScrollToTop = () => {
 	const [showScroll, setShowScroll] = useState(false);
 
+	useEffect(() => {
+		window.addEventListener('scroll', scrollToTop);
+		return function cleanup() {
+			window.removeEventListener('scroll', scrollToTop);
+		};
+	});
+
 	const scrollToTop = () => {
-		if (!showScroll & (window.pageYOffset > 500)) {
+		if (!showScroll && window.pageYOffset > 400) {
 			setShowScroll(true);
-		} else if (showScroll && window.pageYOffset <= 500) {
+		} else if (showScroll && window.pageYOffset <= 400) {
 			setShowScroll(false);
 		}
 	};
@@ -23,10 +32,17 @@ const useScrollToTop = () => {
 
 	return (
 		<>
-			<FIChevronUp
+			<FiChevronUp
 				className="scrollToTop"
 				onClick={backToTop}
-				style={{ height: 40, display: showScroll ? 'flex' : 'none' }}
+				style={{
+					height: 45,
+					width: 45,
+					borderRadius: 50,
+					right: 50,
+					bottom: 50,
+					display: showScroll ? 'flex' : 'none',
+				}}
 			/>
 		</>
 	);