Update app.py

app.py

@@ -31,24 +31,34 @@ about_page = st.Page(
     icon=":material/info:",
     default=False)
 
+# --- Automatic Scrolling Approach ---
+# Add a checkbox to control auto-scrolling
+auto_scroll = st.sidebar.checkbox("Auto-scroll to bottom", value=True)
 
 # Create scrollable content
 for i in range(100):
     st.write(f"This is scrollable content line {i}")
 
-# Create an anchor at the bottom
-st.markdown('<div id="bottom"></div>', unsafe_allow_html=True)
-
-# Add JavaScript to automatically scroll to the anchor
-st.markdown("""
-<script>
-    // Set a timeout to ensure the page has loaded
-    setTimeout(function() {
-        // Scroll to the bottom anchor
-        document.getElementById('bottom').scrollIntoView();
-    }, 500);
-</script>
-""", unsafe_allow_html=True)
+# Add a manual scroll button at both top and bottom for convenience
+if st.button("Scroll to Bottom") or auto_scroll:
+    # Create a link target
+    st.markdown('''
+    <a name="bottom"></a>
+    ''', unsafe_allow_html=True)
+    
+    # Use Streamlit's HTML component to execute the scroll
+    st.components.v1.html('''
+    <script>
+        // Use the iframe parent to scroll the main content area
+        window.parent.document.querySelector('section.main').scrollTo({
+            top: window.parent.document.querySelector('section.main').scrollHeight,
+            behavior: 'smooth'
+        });
+    </script>
+    ''', height=0)
+
+# Add some text at the bottom as a visual indicator
+st.write("You've reached the bottom!")
 
 
 # --- NAVIGATION SETUP ---