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.
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.
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
This is great! Thank you so much @Louis, will try it out!
Is it possible to have a client-side callback so that when a certain element is updated, a scroll to that element is performed