Streamlit滑块触发页面整体刷新并回到顶部问题求解

针对你遇到的滑块调整导致全页刷新并回到顶部的问题，有以下几种可行的解决方式：

方法一：使用Streamlit片段（Fragment）实现局部刷新 #

Streamlit 1.30.0及以上版本支持**片段（Fragment）**功能，它可以让指定区域的内容单独刷新，不会触发全页重渲染，自然也就不会跳转回顶部。

修改后的代码如下：

import streamlit as st
from bokeh.plotting import figure

st.subheader('Bernoulli Distribution')

# 用片段包裹需要局部更新的组件和图表
@st.fragment
def update_chart():
    p = st.slider('Probability of Success (p)', 0.0, 1.0, 0.5)
    x = [0, 1]
    y = [1 - p, p]
    
    fig = figure(title='Bernoulli Distribution', x_axis_label='Outcome', y_axis_label='Probability')
    fig.vbar(x=x, top=y, width=0.5)
    st.bokeh_chart(fig, use_container_width=True)

update_chart()

方法二：针对旧版Streamlit（1.30以下）的兼容方案 #

如果你使用的是低于1.30.0的Streamlit版本，可以使用st.experimental_fragment替代st.fragment，代码逻辑完全一致：

import streamlit as st
from bokeh.plotting import figure

st.subheader('Bernoulli Distribution')

@st.experimental_fragment
def update_chart():
    p = st.slider('Probability of Success (p)', 0.0, 1.0, 0.5)
    x = [0, 1]
    y = [1 - p, p]
    
    fig = figure(title='Bernoulli Distribution', x_axis_label='Outcome', y_axis_label='Probability')
    fig.vbar(x=x, top=y, width=0.5)
    st.bokeh_chart(fig, use_container_width=True)

update_chart()

方法三：固定页面布局配合Session State（备选方案） #

如果上述片段功能无法使用，还可以通过st.session_state保存滑块状态，同时用容器固定组件位置，减少页面跳转的感知：

import streamlit as st
from bokeh.plotting import figure

st.subheader('Bernoulli Distribution')

# 初始化Session State保存滑块值
if 'p_value' not in st.session_state:
    st.session_state.p_value = 0.5

# 用容器包裹滑块，固定位置
slider_container = st.container()
with slider_container:
    p = st.slider('Probability of Success (p)', 0.0, 1.0, st.session_state.p_value, key='p_slider')
    st.session_state.p_value = p

# 渲染图表
x = [0, 1]
y = [1 - p, p]
fig = figure(title='Bernoulli Distribution', x_axis_label='Outcome', y_axis_label='Probability')
fig.vbar(x=x, top=y, width=0.5)
st.bokeh_chart(fig, use_container_width=True)

这个方案通过Session State维持滑块值，容器固定组件位置，虽然页面仍会刷新，但跳转顶部的感知会大幅降低。

内容的提问来源于stack exchange，提问作者JudeW