Jump to section of components.html

Using Streamlit
1

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?

2

Hi @lattice,

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

3

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?

4

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

1 Like
5

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!
PJ

6

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(), """
    <script>
        var element = document.getElementById("{}");
        element.scrollIntoView();
    </script>
    </body>
    """.format(element_id).encode())

components.html(scroll(html, element))

James

7

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

1 Like
8

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

9

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?

10

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

11

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