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