Streamlit scrolling to end page

The task is to scroll down the page when you click on the button in Streamlit.

This describes how it can be implemented, but it doesn't work.

I tried this:

st.session_state['dummy_counter'] += 1
st.markdown(
    """
    <div id="end"></div>
    """,
    unsafe_allow_html=True
)
st.components.v1.html(f"""
    <script>
        console.log('check');
        var count = {st.session_state['dummy_counter']};
        var element = document.getElementById("end");
        if (element)  {{
            element.scrollIntoView({{behavior: "smooth"}});
            console.log('check2');
        }}
    </script>
""",height=1)

Scrolling occurs when executing the code in the browser, but Streamlit does not work.

I want to scroll the page to the end element when I output it in the console, the end element will find it, but in the Streamlit at the stage:

var element = document.getElementById ("end"); 

returns element = null in the browser:

<div id="end"></div>

I set the timer, it is visible that this is not due to page loading.

Perhaps there is a simpler solution? Or how to fix mine? Thanks.

The problem you have in your snippet is that the component creates an iframe and cannot find the div with id="end".

You can take a look at this example which should give you an idea of how to overcome the problem.