Jump to section of components.html

My app uses the Streamlit html component to render an html document on a page.

I’d like to be able to have the user “jump” to a specific section of the document. Does anyone know if this is possible through streamlit?

Hi @lattice,

Thanks for sharing your question! Have you tried adding anchor HTML elements?

Hi, thanks for the response. I am specifically looking to allow the users to jump within content rendered by the components.html streamlit component. Is there a way to accomplish this using an anchor element in the html passed to the component?

Understood – have you tried passing an HTML anchor element to the components.html() function?

1 Like

Hello, I am having the same issue. I pass an html body to components.html(), which includes some anchors <a id="myanchor"> but calling these anchors either within the html itself or outside of it in the streamlit app does not work. The link within the html tries to go to https://myapplocation:host/#myanchor instead of within the html.
Is there a way to add a “jump to” link to a specific part of the html we feed into components.html()?
Also, note that when opening the html outside the app. the anchors and links work as expected.

Thank you!

Hi PJ,

I am the same user as “lattice” above - I was able to get this to work by adding javascript to the html file being displayed by components.html(). The following function takes a bytes-type html document and inserts a short scrolling script at the bottom of the body. Hope this helps.

def scroll(html, element_id):
    return html.replace('</body>'.encode(), """
        var element = document.getElementById("{}");

components.html(scroll(html, element))


Thank you James! I confirm it worked like a charm!

1 Like

Unfortunately this is not working for me. It seems to me that the command does not propagate to the parent window.

Is it possible that an existing script in your html is taking precedence over the inserted script? or that the element isnt being selected, maybe if its loaded in asynchronously?

I think there was some asynchronocity that lead to issues. If I put a long enough timer on it, it does work.