# Scroll page in callback

**URL:** <https://community.plotly.com/t/scroll-page-in-callback/80570>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [November 30, 2023, 2:46pm UTC](https://community.plotly.com/t/scroll-page-in-callback/80570 "2023-11-30T14:46:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SirQuantAlot](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@SirQuantAlot](https://community.plotly.com/u/SirQuantAlot)\
**Post date:** [November 30, 2023, 2:46pm UTC](https://community.plotly.com/t/scroll-page-in-callback/80570/1 "2023-11-30T14:46:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Louis](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Louis](https://community.plotly.com/u/Louis)\
**Post date:** [December 1, 2023, 6:37am UTC](https://community.plotly.com/t/scroll-page-in-callback/80570/3 "2023-12-01T06:37:19Z")

</div>

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

```auto
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](https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element)

---

<div class="post-metadata">

**Author:** ![SirQuantAlot](https://avatars.discourse-cdn.com/v4/letter/s/4491bb/32.png) [@SirQuantAlot](https://community.plotly.com/u/SirQuantAlot)\
**Post date:** [December 1, 2023, 4:17pm UTC](https://community.plotly.com/t/scroll-page-in-callback/80570/4 "2023-12-01T16:17:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![leandroneckel](https://avatars.discourse-cdn.com/v4/letter/l/b5e925/32.png) [@leandroneckel](https://community.plotly.com/u/leandroneckel)\
**Post date:** [April 25, 2024, 7:49pm UTC](https://community.plotly.com/t/scroll-page-in-callback/80570/5 "2024-04-25T19:49:44Z")

</div>

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