Go back to top of a large page/ sidebar radio button

Using Streamlit
1

Hello everyone,

I use the widget sidebar radio button to display different pages. Some of them are quite large , so i have to scroll to the back of the page to see the content but when i choose another radio button option, it displays the back of the new page, and i must scroll to the top. How can I go directly to the top of the new page?
For the moment, i add a link at the bottom of the page :
image

which refers to :

image
image769Ă—36 2.62 KB

Is it possible to customize the radio button ?
Thanks in advance :slight_smile:

1 Like
2

Hi @ally and welcome to the forum :wave:

Unfortunately, right now that’s not supported in Streamlit.

However, one of our major goals for 2020 is Streamlit plugin system which will give you the ability to write arbitrary JavaScript code and insert it into your app. This opens the door for a lot of possibilities for custom solutions to layout, visualization, interactivity with chart/maps/tables, and other unique needs of your app. You can help design this feature or follow its progress over there https://github.com/streamlit/streamlit/issues/327.

P.S. Thanks for using Streamlit!

1 Like
3

Hi @kantuni, I have the exact same problem and I’m wondering if maybe there is an alternative since we’re now a year later?

Thanks!

EDIT: nevermind that, I’ve found a workaround by adding a hidden div.

pages = ["Page 1", "Page 2"]
section = st.sidebar.radio('', pages)     # this is my sidebar radio button widget

# hidden div with anchor
st.markdown("<div id='linkto_top'></div>", unsafe_allow_html=True)    

if section == "Page 1":                  # This is the beginning of my first page
    st.header("This is my first page")
    st.write("Let's pretend there is a lot displayed on this page")

    # add the link at the bottom of each page
    st.markdown("<a href='#linkto_top'>Link to top</a>", unsafe_allow_html=True)

if section == "Page 2":
    st.header("This is my second page")
    st.write("Let's pretend there is a lot displayed on this page")

    # add the link at the bottom of each page
    st.markdown("<a href='#linkto_top'>Link to top</a>", unsafe_allow_html=True)
2 Likes
4

Hey @ObliviousMonkey,

Nice hack!
If you need something more flexible, try Streamlit Components.

Feel free to reach out if you have any questions.

5

Hey @kantuni,

Thanks for the tip. I’ve watched the videos and it’s way beyond what I can do, it would take me too much time to familiarize myself with Javascript and front end in general (which I have zero experience in).

However maybe an additional option could be added down the road to st.radio in order to specify the initialization at the top, because I think a lot of people are using it as a sidebar page navigator, and it’s just not practical to have it remember the scroll position of the previous page which is usually the bottom…

1 Like