NO WAY to set focus at top of screen on page reload. Really?

🎈 Using Streamlit
8

Hello @bilbo,

As you said, components.html encapsulates its code inside an iframe, but you can access the rest of the page with window.parent. That said, to scroll to the top, you’d do something like this:

<script>window.parent.document.querySelector('section.main').scrollTo(0, 0);</script>

There’s a little catch though. Passing this line directly to components.html may work only once, as it will render (and thus execute that javascript line) only once if no parameter was changed between two script runs.

If you manage your different pages with st.session_state, what you could do is change the width parameter to force it to re-render every run, like so:

components.html(
    "<script>window.parent.document.querySelector('section.main').scrollTo(0, 0);</script>",
    width=(st.session_state.page % 2), # This will alternate between 0 and 1 with no visual changes, even with many pages
    height=0,
)
2 Likes