Jump to html anchor using dash-bootstrap-component button in python

Question

I'm trying to get a button to jump/scroll to a certain part of the webpage using dash-bootstrap-components. The anchor is added to the URL correctly, but the webpage doesn't move.

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')

I've tried using dbc.NavLink instead of Button, but the same thing happens.

score 1 · Answer 1 · answered Feb 04 '22 at 18:19

According to the dbc documentation, Button has an href field that can link to an internal id or an external url; however, according to an issue on their repo, it doesn't work for internal ids. You have to use html.A() to jump to the section.

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')

score 0 · Answer 2 · answered Jul 21 '22 at 17:18

I think this offers a better demonstration:

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')
          ])
  ])
])

Jump to html anchor using dash-bootstrap-component button in python

2 Answers2