Prevent page from scrolling down

There is an issue where Streamlit will generate HTML elements with empty id and the browser will scroll down to it.

A demo is available here: https://github.com/maxa-david-francoeur/streamlit-experimentations/blob/main/pages/scrolldown.py

And it is deployed here:

There is a number of issues (locked) that mention an issue with this but none of them appear to provide a reproducer so it’s hard to tell if the cause is the same but when I had the same issue I hunted until I found the issue.

In our case, we used the empty markdown: st.markdown("##") to add vertical spacing. But this will generate a h2 element with and empty id and then the browser will scroll down to it.

IMO this is unintended and this could be fix. I’d be happy to provide a fix if someone can open an issue on Github and I can get a PR up for it.

Other posts I’ve found:

https://discuss.streamlit.io/t/prevent-page-from-automatically-scrolling-down/46900/3
https://discuss.streamlit.io/t/prevent-chat-from-auto-scrolling-when-message-is-sent/56742/3

1 Like

The issue appears to be from this file: streamlit/frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx at 898fd8094f4ceb004c3eb929bcc88a5b6b72593f · streamlit/streamlit · GitHub

Basically the react component will configure/generate an anchor, use that as the id. Then it compares that anchor as follow:
window.location.hash.slice(1) === anchor

If this check is successful, the code assign the HTML node to target and then, with a 300ms delay, the browser will navigate to it:

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.