Merge pull request #2689 from DevGajjar28/scrolltop

page scroll to top
HimanshuNarware · Aug 7, 2024 · 18ed5f5 · 18ed5f5
2 parents ad0155b + 9db4f14
commit 18ed5f5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/frontend/src/Component/Home.js b/frontend/src/Component/Home.js
@@ -111,10 +111,10 @@ function Home(props) {
 
   const filteredData = !!props.searchQuery
     ? allvalue.filter((datalist) => {
-        return datalist.productName
-          .toLowerCase()
-          .includes(props.searchQuery.toLowerCase());
-      })
+      return datalist.productName
+        .toLowerCase()
+        .includes(props.searchQuery.toLowerCase());
+    })
     : allvalue;
 
   const currentPost =
@@ -128,17 +128,20 @@ function Home(props) {
   const prePage = () => {
     if (currentPage > 1) {
       setCurrentPage(currentPage - 1);
+      window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
     }
   };
 
   const nextPage = () => {
     if (currentPage < npage) {
       setCurrentPage(currentPage + 1);
+      window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
     }
   };
 
   const changeCPage = (id) => {
     setCurrentPage(id);
+    window.scrollTo({ top: document.body.scrollHeight * 0.2, behavior: "smooth" });
   };
 
   const handleBookmark = (datalist) => {
@@ -303,10 +306,13 @@ function Home(props) {
                   </h1>
                 </h1>
 
+
+                <div className="hero-button-container" style={{ display: "flex", justifyContent: "center" }}>
                 <div
                   className="hero-button-container"
                   style={{ display: "flex", justifyContent: "center" }}
                 >
+
                   <button className="hero-button">
                     <NavbarItem description="Get Started" to="/open-source" />
                   </button>
@@ -334,13 +340,17 @@ function Home(props) {
         <br />
         {searchQuery && searchResults.length === 0 && (
           <div className="no-results">
+
+            <img src="./empty-state.png" height={"300px"} width={"300px"} style={{ background: "none" }} alt="empty_state_img" />
+
             <img
               src="./empty-state.png"
               height={"300px"}
               width={"300px"}
               style={{ background: "none" }}
               alt="empty_state_img"
             />
+
             <h1>No matching tools found.</h1>
           </div>
         )}
@@ -360,9 +370,8 @@ function Home(props) {
             {filters.map((category) => (
               <button
                 key={category}
-                className={`filter-button ${
-                  selectedFilters.includes(category) ? "active_filter" : ""
-                }`}
+                className={`filter-button ${selectedFilters.includes(category) ? "active_filter" : ""
+                  }`}
                 onClick={() => handleFilterButtonClick(category)}
               >
                 {category}

diff --git a/frontend/src/Component/Pagination.js b/frontend/src/Component/Pagination.js
@@ -10,6 +10,8 @@ const Pagination = ({
   handlePageChange,
   scrollPosition
 }) => {
+
+
   return (
     <nav>
       <div className="page-index">