feat:added scroll t top button

Author: himanshu1221

.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,70 @@
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+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 (
+
+    <Wrapper>
+      {isVisible && (
+        <div className='top-btn' onClick={GoToBtn}>
+          <FontAwesomeIcon icon={faChevronUp} />
+        </div>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+display: flex;
+justify-content: center;
+align-items: center;
+
+.top-btn{
+  font-size: 1.5rem;
+  font-weight: bold;
+  width: 3rem;
+  height: 3rem;
+  color: #fff;
+  background-color: #DC4A78;
+  border-radius: 50%;
+  position: fixed;
+  bottom: 3rem;
+  right: 5rem;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+}
+
+@media screen and (max-width:750px) {
+  .top-btn{
+      bottom: 1rem;
+      right: 1rem;
+  }
+}
+`;
+export default GoToTop;