Update app.py

app.py

@@ -285,6 +285,16 @@ button {
     }
 </script>
 """
+scroll_to_top_js = """
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const cartButton = document.querySelector('button[gr-id="view_cart_button"]');
+        cartButton.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: "smooth" });
+        });
+    });
+</script>
+"""
 # Authentication and Navigation Logic
 def authenticate_user(email, password):
     if check_credentials(email, password):
@@ -342,7 +352,7 @@ def app():
             menu_output = gr.HTML(value=filter_menu("All"))
 
             # Button to navigate to Cart Page
-            view_cart_button = gr.Button("View Cart")
+            view_cart_button = gr.Button("View Cart", elem_id="view_cart_button")
 
             # Modal window
             modal_window = gr.HTML("""
@@ -382,7 +392,7 @@ def app():
             gr.Row([selected_preference])
             gr.Row(menu_output)
             gr.Row(modal_window)
-            gr.HTML(modal_and_cart_js)
+            gr.HTML(modal_and_cart_js + scroll_to_top_js)
 
          # Cart & Final Order Page
         with gr.Column(visible=False) as cart_section:
@@ -424,28 +434,10 @@ def app():
             outputs=[login_section, signup_section],
         )
         # Navigate to Cart Page
-        # Navigate to Cart Page
-        # HTML component to execute JavaScript
-        scroll_to_top_js = gr.HTML(
-            """
-            <script>
-                 function scrollToTop() {
-                    window.scrollTo({top: 0, behavior: 'smooth'});
-                 }
-            </script>
-             """
-        )
-
-        # Navigate to Cart Page with Scroll-to-Top Behavior
         view_cart_button.click(
             lambda: (gr.update(visible=False), gr.update(visible=True)),
-            outputs=[menu_section, cart_section]
+            outputs=[menu_section, cart_section],
         )
-
-        # Ensure JavaScript runs when switching to the cart page
-        view_cart_button.click(None, None, _js="scrollToTop()")
-
-
         # Navigate Back to Menu Page
         back_to_menu_button.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),