Merge pull request #594 from Prikshit-anthal/main

Solved bug of scroll to top arrow button
Tech-N-Science · Apr 2, 2022 · 85e0666 · 85e0666
2 parents 39e05fd + 35ddc5b
commit 85e0666
Show file tree

Hide file tree

Showing 3 changed files with 11,116 additions and 11,253 deletions.
diff --git a/funwithphysics/src/Components/Home/Home.css b/funwithphysics/src/Components/Home/Home.css
@@ -395,3 +395,8 @@ h2 {
   width: 10%;
   border: 0.2px solid red;
 }
+
+.flexMe{
+      display: flex;
+    justify-content: center;
+}
diff --git a/funwithphysics/src/Components/Home/Home.js b/funwithphysics/src/Components/Home/Home.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState,useRef } from "react";
 import "../Home/Home.css";
 import { Button } from "react-bootstrap";
 import Footer from "../Footer/Footer";
@@ -8,6 +8,8 @@ import Navbar from "../Navbar/Navbar";
 import { Context } from "../../App";
 
 const Home = () => {
+
+  const backToTopRef=useRef(null)
   const [loading, setloading] = useState(true);
   const { dispatch } = useContext(Context);
   useEffect(() => {
@@ -29,71 +31,96 @@ const bookReaderStyle = {
     margin: "0",
     paddingRight: "9px",
   };
+
+  //back to top functionality
+  const handleScroll = () => {
+    const position = window.pageYOffset
+    //console.log(position)
+    if (position == 0)
+      backToTopRef.current.style.display = 'none'
+    else backToTopRef.current.style.display = 'block'
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+
   return (
     <React.Fragment>
       <Navbar />
       <Helmet>
         <title>Fun With Science - Tech N Science </title>
         <meta
-          name="description"
-          content="We at Tech N Science try to bring all sciences under one roof by providing JEE level questions and also calculators for different science formulas."
-          data-react-helmet="true"
+          name='description'
+          content='We at Tech N Science try to bring all sciences under one roof by providing JEE level questions and also calculators for different science formulas.'
+          data-react-helmet='true'
         />
         <meta
-          name="keywords"
-          content="Classical Mechanics, calculator, physics, Tech n science, technscience, tech and science, Physics formula, Physics calculator, IIT-JEE, NEET,Tech N Science, tech, science, questions, technscienceweb, technscience, tech and science, technscience.com, Tech N Science, technscience. com, tech n science"
+          name='keywords'
+          content='Classical Mechanics, calculator, physics, Tech n science, technscience, tech and science, Physics formula, Physics calculator, IIT-JEE, NEET,Tech N Science, tech, science, questions, technscienceweb, technscience, tech and science, technscience.com, Tech N Science, technscience. com, tech n science'
         />
       </Helmet>
       {/* ----Banner---- */}
-      <div className="banner">
-        <p id="credit">
-          Photo by{" "}
-          <a href="https://unsplash.com/@nasa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
+      <div className='banner'>
+        <p id='credit'>
+          Photo by{' '}
+          <a href='https://unsplash.com/@nasa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>
             NASA
-          </a>{" "}
-          on{" "}
-          <a href="https://unsplash.com/s/photos/planet?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">
+          </a>{' '}
+          on{' '}
+          <a href='https://unsplash.com/s/photos/planet?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>
             Unsplash
           </a>
         </p>
-        <div className="banner_container">
-          <div className="blur-background">
-            <h2 className="banner_text auto pt-5">
+        <div className='banner_container'>
+          <div className='blur-background'>
+            <h2 className='banner_text auto pt-5'>
               We at Tech N Science try to bring all sciences under one roof by
               providing JEE level questions and also calculators for different
               science formulas.
               <br />
               So, keep Exploring!!.
             </h2>
           </div>
-          <div className="banner_button">
-            <Button href="#learn" className="btn btn-light">
-              {" "}
+          <div className='banner_button'>
+            <Button href='#learn' className='btn btn-light'>
+              {' '}
               Learn
-              <i style={bookReaderStyle} className="fas fa-book-reader"></i>
+              <i style={bookReaderStyle} className='fas fa-book-reader'></i>
             </Button>
           </div>
         </div>
       </div>
       <div>
-        <h3 className="learn-header" id="learn">
+        <h3 className='learn-header' id='learn'>
           Learn
         </h3>
         <center>
-          <hr className="learn-underline" />
+          <hr className='learn-underline' />
         </center>
       </div>
       <LearnMore />
       <Footer />
       {/* <!-- Back to top button --> */}
-      {!loading && (
-        <button className="gotopbtn" onClick={scroll}>
-          {" "}
-          <i className="fas fa-arrow-up"></i>{" "}
+
+
+        <button
+          className='gotopbtn'
+          onClick={scroll}
+          ref={backToTopRef}
+          style={{ display: 'none' }}
+        >
+          {' '}
+          <i className='fas fa-arrow-up flexMe'></i>{' '}
         </button>
-      )}
+
     </React.Fragment>
-  );
+  )
 };
 const scroll = () => {
   window.scrollTo({ top: 0, behavior: "smooth" });