Scroll page in callback

Dash Python
1

Hi all, apologies if this has been asked but I could not see it clearly. I was wondering if it is possible to have a callback scroll to a certain section of a page?

Many thanks in advance.

3

Hey,
you can do so by using a clientside callback and window.scroll,
here is an mre:

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

app = Dash(__name__)

app.layout = html.Div([
    html.Button('Scroll Down', id='scroll-button'),
    html.Div(id='scroll-output'),
    html.Div([html.Div(i) for i in range(200)], style = {'height': '1000px'})
])

# Clientside callback to scroll down the page
clientside_callback(
    """
    function(n_clicks) {
        if (n_clicks > 0) {
            window.scroll(0, 200);
        }
        return n_clicks;
    }
    """,
    Output('scroll-output', 'children'),
    Input('scroll-button', 'n_clicks'),
)

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

If youre searching for a particular element to scroll to, you can use the position like described here: javascript - Retrieve the position (X,Y) of an HTML element - Stack Overflow

1 Like
4

This is great! Thank you so much @Louis, will try it out!

1 Like
5

Is it possible to have a client-side callback so that when a certain element is updated, a scroll to that element is performed