使用 python 中的 dash-bootstrap-component 按鈕跳轉到 html 錨點

Question

我正在嘗試使用 dash-bootstrap-components 獲得一個按鈕來跳轉/滾動到網頁的某個部分。 錨點已正確添加到 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； 但是，根據他們 repo 上的一個問題，它不適用於內部 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')
          ])
  ])
])