balloob/react-sidebar

Scroll to top on route change in mobile and desktop screens?

avinashdvv opened this issue · 3 comments

avinashdvv commented

I am developing a website in react JS. In this website, I am facing a trouble. When we click a link in the mid of the page; then the linked page opens. but in the same position of the page. The page does not take to the header. I realized that there is some problem in scrolling to top after routing to another page.

Need some support, please...

I am using react-slider: ^2.3.2]
@balloob

theopoenaru commented

Hey realize this is a bit belated but had the same challenge. For an app:

<Sidebar><div id='my-page' /></Sidebar>

solved by setting the router onChange to this:

if (document.getElementById('my-page')) { // onChange called once before my-page renders
    document.getElementById('my-page').parentNode.scrollTop = 0;
}
  • ❤️1
jsonkao commented

Thanks so much @theopoenaru ! I've had this challenge in my app for at least two months now, and just today have isolated our scroll-reset's breaking to when we installed react-sidebar. This worked perfectly!

  • 🎉1
alebrozzoSP commented

Tough. It didn't work for me :(

  • 😕2