feat:added scroll to top button

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run start
+
+

package.json

@@ -20,6 +20,10 @@
   },
   "dependencies": {
     "@badrap/bar-of-progress": "^0.2.2",
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
     "@mdx-js/loader": "^2.2.1",
@@ -28,6 +32,7 @@
     "@types/node": "18.15.5",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/styled-components": "^5.1.26",
     "axios": "^1.2.2",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
@@ -46,6 +51,7 @@
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.31.3",
+    "styled-components": "^5.3.9",
     "typescript": "5.0.2",
     "unified": "^10.1.2",
     "unist-util-map": "^3.1.3"

src/components/footer/index.tsx

@@ -4,6 +4,7 @@ import GradientBG from '@utilities/GradientBg';
 import Logo from '@utilities/Logo';
 import StarUs from '@utilities/StarUs';
 import colors from 'tailwindcss/colors';
+import GoToTop from '../topbutton/GoToTop';
 import FooterList from './FooterList';
 import Slogun from './Slogun';
 
@@ -35,6 +36,7 @@ export default function Footer() {
           <FooterList />
         </div>
       </Container>
+      <GoToTop/>
     </footer>
   );
 }

src/components/topbutton/GoToTop.tsx

@@ -0,0 +1,37 @@
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, useEffect, useState } from 'react';
+
+const GoToTop: FC = () => {
+  const [isVisible, setIsVisible] = useState(false)
+  const GoToBtn = () => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+  }
+
+
+  const listenToScroll = () => {
+    const downScroll = document.body.scrollTop || document.documentElement.scrollTop
+    const heightToHidden = 250;
+    if (downScroll > heightToHidden) {
+      setIsVisible(true)
+    } else {
+      setIsVisible(false)
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', listenToScroll)
+  }, [])
+
+  return (
+    <>
+      {isVisible && (
+        <div className='top-btn fixed flex justify-center items-center text-2xl font-normal w-12 h-12 text-white bg-[#DC4A78] rounded-full bottom-12 right-20 z-[999] cursor-pointer md: bottom-4 right-4' onClick={GoToBtn}>
+          <FontAwesomeIcon icon={faChevronUp} />
+        </div>
+      )};
+      </>
+  );
+};
+
+export default GoToTop;

tailwind.config.js

@@ -19,6 +19,12 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   darkMode: 'class',
   theme: {
+    screens: {
+      sm: '480px',
+      md: '768px',
+      lg: '976px',
+      xl: '1440px',
+    },
     extend: {
       colors: {
         accent: {