Merge pull request #1462 from lade6501/scroll-to-top-button

feat : Added scroll to top feature

Author: mdazfar2

website3.0/components/ScrollToTop.js

@@ -0,0 +1,48 @@
+"use client";
+import { Context } from "@context/store";
+import React, { useContext, useCallback, useEffect, useState } from "react";
+import { faArrowUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+function ScrollToTop() {
+  let { theme } = useContext(Context);
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Memoize the visibility toggle logic
+  const toggleVisibility = useCallback(() => {
+    if (window.scrollY > 300) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, [toggleVisibility]);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <button
+      className={`${
+        theme ? "bg-[#63B5C3] text-white" : "bg-gray-100 text-black"
+      } fixed right-8 bottom-12 z-10 rounded-full max-sm:w-32 max-sm:px-3 max-sm:py-2 px-5 py-3  transition duration-500 transform hover:scale-105`}
+      onClick={scrollToTop}
+    >
+      <FontAwesomeIcon icon={faArrowUp} bounce />
+    </button>
+  );
+}
+
+export default ScrollToTop;

website3.0/src/app/layout.js

@@ -7,6 +7,7 @@ import Authprovider from "@components/auth/Authprovider";
 import { NextAuthProvider } from "./provider";
 import { GlobalContext } from "@context/store";
 import React from "react";
+import ScrollToTop from "@components/ScrollToTop";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
@@ -23,18 +24,20 @@ export const metadata = {
       { size: "32x32", href: "/HelpOps-H Fevicon-32.webp" },
       { size: "16x16", href: "/HelpOps-H Fevicon-16.webp" },
     ],
-  },    /* Keywords and other details for SEO Optimization purpose */
-  keywords: "DevOps, HelpOps, DevOps Support, DevOps Hub, Helpops Hub, DevOps Resources, DevOps Tutorials, DevOps Tools, DevOps Best Practices, Continuous Integration, Continuous Delivery, CI/CD, Infrastructure as Code, IaC, DevOps Automation, DevOps Monitoring, dev ops, dev ops what is, devops tools, dev ops pipeline, devops technologies, cloud devops, dev ops projects, learn devops, devops practices, dev ops team, devops support, devops journey, it dev ops, devops trends, devops community, devops guidelines, challenges with devops, challenges in devops, what is devops, devops meaning, devops azure, devops aws, azure devops pipeline, aws devops, devops blogs, devops benefits, devops basics, devops best practices, branching strategy in devops, build tools in devops, devops ci/cd, ci cd devops, copilot azure devops, devops definition, devops tools, devops full form, DevOps deployment, DevOps integration, DevOps security, DevOps metrics, DevOps efficiency, how to use devops, where to use devops, what is devops, what is helpopshub, about helpopshub, contact helpopshub, azfar alam, helpops team, helpopshub contact, helpops contact, helpopshub team, devops discussions, helpopshub discussions, devops arsenal, helpopshub opensource, devops issues, solve devops, trends in devops, devops trends, innovations in devops, devops technologies, technologies in devops, technologies of devops, azfar alam devops, azfar alam developer, azfar alam devops engineer, devoops engineer",
+  } /* Keywords and other details for SEO Optimization purpose */,
+  keywords:
+    "DevOps, HelpOps, DevOps Support, DevOps Hub, Helpops Hub, DevOps Resources, DevOps Tutorials, DevOps Tools, DevOps Best Practices, Continuous Integration, Continuous Delivery, CI/CD, Infrastructure as Code, IaC, DevOps Automation, DevOps Monitoring, dev ops, dev ops what is, devops tools, dev ops pipeline, devops technologies, cloud devops, dev ops projects, learn devops, devops practices, dev ops team, devops support, devops journey, it dev ops, devops trends, devops community, devops guidelines, challenges with devops, challenges in devops, what is devops, devops meaning, devops azure, devops aws, azure devops pipeline, aws devops, devops blogs, devops benefits, devops basics, devops best practices, branching strategy in devops, build tools in devops, devops ci/cd, ci cd devops, copilot azure devops, devops definition, devops tools, devops full form, DevOps deployment, DevOps integration, DevOps security, DevOps metrics, DevOps efficiency, how to use devops, where to use devops, what is devops, what is helpopshub, about helpopshub, contact helpopshub, azfar alam, helpops team, helpopshub contact, helpops contact, helpopshub team, devops discussions, helpopshub discussions, devops arsenal, helpopshub opensource, devops issues, solve devops, trends in devops, devops trends, innovations in devops, devops technologies, technologies in devops, technologies of devops, azfar alam devops, azfar alam developer, azfar alam devops engineer, devoops engineer",
   author: "Azfar Alam",
-  openGraph: {    /* Details to display when website is shared */
-    type: "website",
+  openGraph: {
+    /* Details to display when website is shared */ type: "website",
     url: "https://helpopshub.com",
     title: "Helpops-Hub",
     description: "Ensuring You Never Get Stuck In DevOps Again!",
     site_name: "Helpops-Hub",
     locale: "en_US",
   },
-  twitter: {    /* Details to display when website shared on twitter (now X) */
+  twitter: {
+    /* Details to display when website shared on twitter (now X) */
     card: "summary_large_image",
     url: "https://helpopshub.com",
     title: "Helpops-Hub",
@@ -45,23 +48,27 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <link rel="apple-touch-icon" sizes="180x180" href="/HelpOps-H Fevicon-180.webp" />
+      <link
+        rel="apple-touch-icon"
+        sizes="180x180"
+        href="/HelpOps-H Fevicon-180.webp"
+      />
       <link rel="canonical" href="https://www.helpopshub.com/" />
       <link rel="manifest" href="./manifest.json" />
       <body className={inter.className}>
-      <div id="Background1"></div>
-      <div id="Background2"></div>
-      <React.StrictMode>
-
-      <GlobalContext>
-        <NextAuthProvider>
-          <Loader />
-          <Header />
-          {children}
-          <Footer />
-        </NextAuthProvider>
-      </GlobalContext>
-      </React.StrictMode>
+        <div id="Background1"></div>
+        <div id="Background2"></div>
+        <React.StrictMode>
+          <GlobalContext>
+            <NextAuthProvider>
+              <Loader />
+              <Header />
+              {children}
+              <Footer />
+              <ScrollToTop />
+            </NextAuthProvider>
+          </GlobalContext>
+        </React.StrictMode>
       </body>
     </html>
   );