如何无需点击href链接即可自动跳转到对应id的div（Streamlit场景）

Streamlit自动滚动到指定区域解决方案 #

失效原因说明 #

你之前两种方案失效的核心原因：

1. 第一种写法语法错误，没有正确传入HTML字符串，也没有自动触发跳转的逻辑，自然无法生效
2. 第二种的JS代码运行在components.html默认生成的独立iframe中，只能修改iframe自身的地址，无法操作外层Streamlit主页面的DOM和锚点

完整可运行示例 #

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

# 页面顶部内容
st.title("自动滚动演示页面")
st.markdown("页面加载完成后会自动滚动到底部的目标锚点位置")

# 加入占位内容撑高页面，直观展示滚动效果
for i in range(30):
    st.write(f"测试内容第 {i+1} 行")

# 你之前定义的底部锚点div
st.markdown("<div id='linkto_bot'></div>", unsafe_allow_html=True)
st.markdown("✅ 已滚动到页面底部目标区域")

# 自动滚动JS代码
auto_scroll_js = """
<script>
// 操作外层Streamlit主页面的DOM，定位目标锚点
const target = parent.document.getElementById('linkto_bot');
if(target) {
    // 平滑滚动到锚点位置，不需要平滑效果就把behavior改成'auto'
    target.scrollIntoView({behavior: 'smooth', block: 'start'});
}
</script>
"""
# 渲染JS，height设为0不占用页面显示空间
components.html(auto_scroll_js, height=0)

自定义调整说明 #

• 要滚动到其他位置，只需要修改对应锚点div的id属性，同步修改JS中getElementById的参数即可
• 要实现瞬间跳转，把JS中的behavior: 'smooth'替换为behavior: 'auto'
• 自动滚动的JS代码必须放在所有页面内容渲染完成之后，避免锚点元素还没加载导致JS找不到目标

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