Automatically Scroll to Top of Page on Data Refresh

🎈 Using Streamlit
1

I have a tall page with several charts displayed one over the next. At the bottom I have a “Next” button that loads the same chart set but with different data.

How do I force Streamlit to focus back at the top of the page when the new data loads. Manually scrolling back each time is cumbersome.

Thanks!

1 Like
2

This is what I came up with. Don’t know if there is a better way.

EDIT: The following works but not with the Plotly charts that my main project is using. The Plotly charts turn grey while the data is loading and the browsers focus never moves from the bottom to the top of the page:(

import streamlit as st
import numpy as np
import time

st.title("Refresh Chart Data and Refocus at TOP")
my_slot1 = st.empty()
my_slot2 = st.empty()
my_slot3 = st.empty()
my_slot4 = st.empty()  

# Simulate reload data call
a = np.random.randn(20, 2)
b = np.random.randn(20, 2)
c = np.random.randn(20, 2)
d = np.random.randn(20, 2)
with st.spinner("Loading..."):
    time.sleep(1)

my_slot1.line_chart(a)
my_slot2.line_chart(b)
my_slot3.line_chart(c)
my_slot4.line_chart(d)

st.button("Next")
1 Like