使用python中的dash引导组件按钮跳转到html锚点

Question

我正在尝试使用dash引导程序组件获得一个按钮来跳转/滚动到网页的某个部分。锚点已正确添加到URL，但网页不会移动。

import dash_html_components as html
import dash_bootstrap_components as dbc
layout = html.Div([
...
html.Div([
dbc.Button('Record Information', id='record-info-btn', href='#record-info'
className='btn btn-orange align-middle btn btn-secondary')])
...
html.Div([
dbc.Form([
html.Div([
dbc.FormGroup([
html.Div([
html.H3('Record Information', id='record-info')
...
])
])
])
])
])
], className='whitContainerHalf')

我试过使用dbc。NavLink而不是Button，但同样的事情也会发生。

Answer 1

根据dbc文档，Button有一个href字段，可以链接到内部id或外部url；然而，根据他们回购的一个问题，这对内部id不起作用。你必须使用html。A((跳到节。

import dash_html_components as html
import dash_bootstrap_components as dbc
layout = html.Div([
...
html.Div([
html.A(dbc.Button('Record Information', id='record-info-btn', 
className='btn btn-orange align-middle btn btn-secondary'), 
href='#record-info')
])
...
html.Div([
dbc.Form([
html.Div([
dbc.FormGroup([
html.Div([
html.H3('Record Information', id='record-info')
...
])
])
])
])
])
], className='whiteContainerHalf')

Answer 2

我认为这提供了一个更好的演示：

app.layout = html.Div([
html.Div([
html.A(dbc.Button('Record Information', id='record-info-btn'), 
href='#record-info')
]),
html.Div([
html.Div([], style={'display': "block", 'height': "2000px"}),
html.Div([
html.H3('Record Information', id='record-info')
])
])
])