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?

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/#…

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 scr…

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

[image] james-ellsworth: <script> var element = document.getElementById("{}"); element.scrollIntoView(); </script> 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.

Jump to section of components.html

Using Streamlit

Caroline December 15, 2022, 9:51pm 4

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

Programmatically jump to anchor on same page after clicking button

Topic		Replies	Views
Programmatically jump to anchor on same page after clicking button Using Streamlit discussion	3	1380	September 20, 2024
Scroll to page section that is being rendered Using Streamlit discussion	1	1521	August 19, 2024
Anchor Tags Not Working Using Streamlit debugging	5	176	October 24, 2024
Implement scrolling to a specific location in page using Javascript Using Streamlit debugging	1	450	October 24, 2024
Possible to link to element within the same app? Using Streamlit	2	851	December 10, 2023

Jump to section of components.html

Related topics