Page scrolling on opening and reload

Using Streamlit
1

Hi,

Recently I faced an issue when my page scrolls down to the bottom istead of starting with no scoll. Due to this issue, I am not even able to see my name and avatar, as you can see in this video.
I searched for a possible solution but couldn’t find anything.

PS.: I looked at this similar issue (link to access) but it has no replies nor visible solution.

Best,
Naomi Lago

1 Like
2

I’m having the same issue - following this tutorial: GitHub - Sven-Bo/digital-resume-template-streamlit

1 Like
3

Yeah, that’s the tutorial I’m following. I even opened an issue on Github for this occasion.

1 Like
4

It’s been two days…

1 Like
5

I have the same issue (with another project). Have you already fixed the bug?

2 Likes
6

Unfortunately not… Streamlit kind of ignores our post about this specific issue.
There are more people with the same thing but also no answeres

1 Like
7

From st.title documentation:

Each document should have a single st.title(), although this is not enforced.

The issue I think is that every st.write("#") in that app is interpreted as a st.markdown("#"), which is equivalent to adding an empty st.title(""), which is equivalent to an empty <h1> html tag. But there should be an unique title in the app as streamlit looks for that beginning.

In streamlit, the header levels follow something like:

Streamlit HTML Markdown
st.title <h1> #
st.header <h2> ##
st.subheader <h3> ###

Not sure why you’d need those empty title anchors (i.e., the st.write("#") before each section, maybe to add some vertical whitespace?) but removing them should fix your issue.

3 Likes
8

Perfect solution! Having multiple titles is the issue.

To add white space it’s therefore better to define a helper function like this:

def V_SPACE(lines):
    for _ in range(lines):
        st.write('&nbsp;')
2 Likes
9

This problem is happening to me. I have an st.title at the start of my script, and a st.write(“##”) somewhere after, and the screen jumps to the ## at the start of every session. ## happens to be the near perfect amount of space for a button to line up with a text input with description text in an adjacent column, whereas   is too much vertical space.

The explanation above kind of suggests that using ## and ### would be safe with st.title, but it seems that is not the case. Does anyone have any advice for what to do?

I tried replacing the st.title with st.write(“##”) but I don’t think that worked.

2 Likes
11

Hey @naomilago, aside your question, how did you create the animated logo at the main screen of your app? That looks really good!

Best,

JOMI

1 Like
12

You’re the best ! It works perfectly ! :slight_smile:

2 Likes
13

Hi!
Thanks, I could diagnose why this is happening in my site.
In my case though, I’m using a streamlit authenticator login form which probable uses a st.title, making my site scroll to the title when uploaded. Unfortunately my form is not placed at the top of my site, is there any workaround so I don’t have to move it to the top?

1 Like