Merge pull request #1028 from Eshajha19/receipt-scroll

Add Scroll to Top Button on Receipt Page

Author: Renu-code123

public/receipt.css

@@ -471,4 +471,31 @@ font-size:16px;
 
 }
 
+}#scrollTopBtn{
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: linear-gradient(135deg,#00e6a8,#64ffda);
+    color: #000;
+    border: none;
+    padding: 14px 16px;
+    border-radius: 50%;
+    font-size: 18px;
+    cursor: pointer;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 0 15px rgba(100,255,218,0.7);
+    transition: all 0.3s ease;
+}
+
+#scrollTopBtn:hover{
+    transform: translateY(-4px) scale(1.1);
+    box-shadow: 0 0 25px rgba(100,255,218,1);
+}
+
+/* Dark Mode */
+
+body.dark-mode #scrollTopBtn{
+    background: linear-gradient(135deg,#64ffda,#00bfa5);
+    color:white;
 }

public/receipt.html

@@ -8,7 +8,7 @@
 <title>Receipt Scanner | ExpenseFlow</title>
 
 <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
-
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 <link rel="stylesheet" href="receipt.css">
 
 </head>
@@ -97,6 +97,10 @@ <h2>Saved Expenses</h2>
 <span id="popupMsg"></span>
 
 </div>
+<!-- Scroll To Top Button -->
+<button id="scrollTopBtn" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+</button>
 <script src="receipt.js"></script>
 
 </body>

public/receipt.js

@@ -251,4 +251,19 @@ popup.classList.remove("show");
 
 },3000);
 
-}
+}const scrollBtn = document.getElementById("scrollTopBtn");
+
+window.onscroll = function () {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        scrollBtn.style.display = "block";
+    } else {
+        scrollBtn.style.display = "none";
+    }
+};
+
+scrollBtn.addEventListener("click", function () {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+});