feat: add animated back to top button component (#797)

* feat: Add animated back to top button component

- Added BackToTopButton component with smooth scroll functionality
- Integrated button in _app.tsx to appear on all pages
- Added CSS animations for hover effects and smooth transitions
- Button appears after scrolling 300px down the page
- Responsive design with purple gradient hover effect

* feat: Enhance BackToTopButton with performance optimizations and custom animations

* move logic to useEffect

---------

Co-authored-by: Azeez Elegbede <[email protected]>
Co-authored-by: acethecreator <[email protected]>

Author: Recxsmacx

components/Buttons/BackToTopButton.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import Arrows from '../illustration/arrows';
+
+const BackToTopButton: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    let inThrottle = false;
+
+    const toggleVisibility = () => {
+      if (window.pageYOffset > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    const throttledToggleVisibility = () => {
+      if (!inThrottle) {
+        toggleVisibility();
+        inThrottle = true;
+        setTimeout(() => {
+          inThrottle = false;
+        }, 150);
+      }
+    };
+
+    window.addEventListener('scroll', throttledToggleVisibility);
+
+    return () => {
+      window.removeEventListener('scroll', throttledToggleVisibility);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return isVisible ? (
+    <button
+      onClick={scrollToTop}
+      className="back-to-top-button fixed bottom-8 right-8 w-12 h-12 rounded-full border-none font-semibold flex items-center justify-center cursor-pointer overflow-hidden z-50 outline-none transition-all duration-300 ease-in-out transform hover:scale-95 active:scale-90"
+      aria-label="Back to top"
+    >
+      <Arrows
+        className="back-to-top-icon w-3 h-3 transition-all duration-300 ease-in-out"
+        direction="up"
+        fill="white"
+      />
+      <span className="back-to-top-text absolute text-white text-xs opacity-0 whitespace-nowrap transition-all duration-300 ease-in-out">
+        Back to Top
+      </span>
+    </button>
+  ) : null;
+};
+
+export default BackToTopButton;

pages/_app.tsx

@@ -1,6 +1,7 @@
 import '../styles/globals.css';
 import Navbar from '../components/Navbar/navbar';
 import Footer from '../components/Footer/footer';
+import BackToTopButton from '../components/Buttons/BackToTopButton';
 import { AppProps } from 'next/app';
 import { useEffect, useState } from 'react';
 
@@ -18,6 +19,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
       <Component {...pageProps} />
       <Footer />
+      <BackToTopButton />
     </div>
   );
 }

styles/globals.css

@@ -259,3 +259,25 @@ backdrop-filter: blur(10px); */
 .hoverEffect:hover {
   transform: scale(1.1); /* Scale the image by 10% on hover */
 }
+
+/* Back to Top Button Styles - Custom animations not handled by Tailwind */
+.back-to-top-button {
+  background-color: rgb(20, 20, 20);
+  box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
+}
+
+.back-to-top-button:hover {
+  width: 140px;
+  border-radius: 50px;
+  background-color: rgb(181, 160, 255);
+}
+
+.back-to-top-button:hover .back-to-top-icon {
+  transform: translateY(-200%);
+  opacity: 0;
+}
+
+.back-to-top-button:hover .back-to-top-text {
+  font-size: 13px;
+  opacity: 1;
+}