Streamlit v1.24.1：点击按钮实现页面返回顶部的方法咨询

问题背景 #

我正在开发一款包含“Next”按钮的标注工具，希望点击该按钮后页面能滚动回到顶部。尝试过st.experimental_rerun()以及自定义JavaScript函数等方法，但均未成功实现需求，求可行解决方案。

原代码存在的问题：
原代码仅定义了JavaScript函数但未实际调用，且Streamlit在按钮点击后会触发页面重渲染，导致注入的JS逻辑无法正确执行。

可行解决方案 #

方案1：结合Session State与组件注入执行滚动逻辑 #

通过Session State标记按钮点击事件，在页面重渲染后注入立即执行的JavaScript代码实现滚动：

import streamlit as st
import streamlit.components.v1 as components

def scroll_to_top():
    # 设置状态标记，标记需要执行滚动
    st.session_state["need_scroll"] = True

def next_button():
    # 长文本内容示例
    st.write("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")
    
    st.button("Next", on_click=scroll_to_top)
    
    # 检查状态标记，执行滚动并重置状态
    if "need_scroll" in st.session_state and st.session_state["need_scroll"]:
        components.html(
            """
            <script>
                // 平滑滚动到顶部，可去掉behavior参数改为瞬间滚动
                window.scrollTo({top: 0, behavior: 'smooth'});
            </script>
            """,
            height=0  # 设置高度为0避免占用页面空间
        )
        st.session_state["need_scroll"] = False

if __name__ == "__main__":
    next_button()

方案2：简洁的Markdown注入方式 #

直接在按钮点击后注入执行滚动的JavaScript，同时通过Session State处理重渲染后的滚动逻辑：

import streamlit as st

def next_button():
    # 长文本内容示例
    st.write("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")
    
    if st.button("Next"):
        st.session_state["trigger_scroll"] = True
    
    # 执行滚动逻辑
    if "trigger_scroll" in st.session_state and st.session_state["trigger_scroll"]:
        st.markdown("""
        <script>
            window.scrollTo(0, 0);
        </script>
        """, unsafe_allow_html=True)
        st.session_state["trigger_scroll"] = False

if __name__ == "__main__":
    next_button()

关键说明 #

• Streamlit按钮点击会触发页面重渲染，因此需要通过Session State标记确保滚动逻辑在重渲染完成后执行。
• window.scrollTo({top: 0, behavior: 'smooth'})实现平滑滚动，若需要瞬间滚动可改为window.scrollTo(0, 0)。
• 使用components.html或st.markdown(unsafe_allow_html=True)注入JavaScript是Streamlit中执行前端逻辑的常用方式。

内容的提问来源于stack exchange，提问作者Jaw. M.