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: {