How to avoid automatic scrolling to the top of the page when callbacks are fired

Dash Python
1

Hi!

I have a Dash dashboard with a couple of interactive components at the top of the page (a date selector and a few checkboxes), followed by a 3 graphs : a table and two bar charts. The interactive components let the user filter the data that they want to visualize in the graphs below.

However, anytime the callbacks updating the charts are fired (i.e. whenever one value of the date range or checkboxed is changed), the page scrolls up to the top. Someone has told me that they find that annoying : they expect the charts to be regenerated, but they don’t want to scroll down again each time they change someting.

Is there any way to avoid this behaviour?

Thanks for your help!

Aj

2

That’s certainly not the intended behavior, might be a bug. Can you share a simplified app where this happens?

3

I had the same issue with a bootstrap dash button callback and I solved it by not having the button’s “href” key argument involved in the callback. Maybe you are using another argument in you callback function inputs or outputs that has a similar behaviour in your browser to “href”, which stores a link that gets opened every time you press the button.

4

Hi @cristina.arnaiz can you please share how you solved it? I’m trying to build a auto scroll to top feature and would be very helpful