Jump to an id/anchor on callback

Dash Python
1

When I select from a graph, I want the page to scroll to an HTML anchor (a component’s id). To do so, the traditional way is to set the hash property in the URL bar to the element’s ID. I found that it’s possible to do that in Dash with the dcc.Location component’s hash property.

However, I want to jump the that location every time I select data in the graph, but once the hash is set once, setting it again doesn’t jump back to the hash’s anchor point.

My current solution, causing it to just jump the first time:

#!/usr/bin/env python3

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dcc.Location(id="location-component"),
        dcc.Dropdown(
            id="demo-dropdown",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montreal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value="NYC",
        ),
        html.P(
            "Try selecting a value  " * 100,
            style={"width": "300px"},
        ),
        html.H1(id="jump-here", children="Jump here"),
        html.P(
            "You just jumped ! Now, without reloading, try again    " * 100,
            style={"width": "300px"},
        ),
    ]
)


@app.callback(
    Output("location-component", "hash"),
    [Input("demo-dropdown", "value")],
    prevent_initial_call=True,
)
def jump(value):
    return "#jump-here"


def main():
    """Main function"""
    app.run_server(debug=True, dev_tools_hot_reload=True)


if __name__ == "__main__":
    main()

Any suggestion ?