Dcc.Link(Refresh=False) scrolling up before changing the page

Dash Python
1

Need help to find a solution in dcc.Link that scrolling up before it will change the url. this is the main issue i encounter so far when building website using dash framework.

2

Hello @akishira, welocome to the forums. You could use a clientside callback.

Gemini provided this example:

from dash import Dash, dcc, html, clientside_callback, Input, Output

app = Dash(__name__)

# --- LAYOUT ---
app.layout = html.Div([
    # This component monitors the URL
    dcc.Location(id='url', refresh=False),
    
    # Navigation Bar (Fixed at the top for convenience)
    html.Nav([
        dcc.Link('Go to Home', href='/'),
        html.Span(" | "),
        dcc.Link('Go to Page 2', href='/page-2'),
    ], style={'position': 'fixed', 'top': 0, 'background': 'white', 'width': '100%', 'padding': '10px', 'borderBottom': '1px solid #ccc', 'zIndex': 1000}),

    # This is where the content will be injected
    html.Div(id='page-content', style={'paddingTop': '60px'})
])

# --- SCROLL TO TOP MAGIC ---
clientside_callback(
    """
    function(pathname) {
        window.scrollTo(0, 0);
        return pathname;
    }
    """,
    Output('url', 'pathname'),
    Input('url', 'pathname')
)

# --- ROUTING CALLBACK ---
@app.callback(
    Output('page-content', 'children'),
    Input('url', 'pathname')
)
def display_page(pathname):
    # Long content to ensure the page is scrollable
    filler_text = [html.P(f"Line {i}: Just adding some height to the page...") for i in range(100)]
    
    if pathname == '/page-2':
        return html.Div([
            html.H1("Welcome to Page 2"),
            html.P("Notice that if you were at the bottom of the Home page, you are now back at the top!"),
            *filler_text
        ])
    else:
        return html.Div([
            html.H1("Home Page"),
            html.P("Scroll all the way down and click 'Go to Page 2' in the nav bar."),
            *filler_text
        ])

if __name__ == '__main__':
    app.run(debug=True)