Changing route doesn't scroll to the top in the new page

javascript

scroll-control

angular-scroll

single-page-applications

byAlex Kataev·Sep 6, 2024

Implementing automatic scrolling to the top upon route changes in React Router can be achieved using useEffect, which invokes window.scrollTo(0, 0) whenever the router's pathname changes:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

// Psst. This ensures you start every page at the top, just like a reset.
// It's like taking a sip of fresh coffee ☕ before turning a new page in a book 📖.
useEffect(() => {
  window.scrollTo(0, 0);
}, [useLocation().pathname]);

Add this block inside your router component to scroll to the top of the viewport with every navigation.

Angular scroll control

In Angular applications, the autoscroll attribute is your best bet for control over scrolling when handling new views. By applying autoscroll="true" to the <div class="ng-view"> container, Angular automatically scrolls to the top when loading a new view:

<!-- Ah! Fresh page. Always smells like a new day. 🌅 -->
<div class="ng-view" autoscroll="true"></div>

For even finer control, listen to the $routeChangeSuccess event to orchestrate window.scrollTo(0, 0):

app.run(['$rootScope', function($rootScope) {
  $rootScope.$on('$routeChangeSuccess', function() {
    // All aboard, next station is top of the page. 🚂💨
    window.scrollTo(0, 0);
  });
}]);

This pattern sets the scroll position to the top whenever a route change is successfully executed.

Remembering scroll position

For moments when you don't want to lose the previous scroll position, employ the $window.history.pushState or .replaceState method. These are handy for preserving the user's scroll position when navigating backward or forward:

// Backward compatibility - it's not just for old browsers!
window.history.pushState(null, document.title, window.location.href);

By using these along with the $locationChangeSuccess event, you can maintain the user's current position even during route transitions.

Advanced Angular autoscroll strategies

For an application-wide effect, consider using the $anchorScroll service inside a .run block:

app.run(['$anchorScroll', function($anchorScroll) {
  // Implementing the secret art of 'scrolling-fu' 🥷.
  $anchorScroll.yOffset = 20; // compensate for your fixed header's height
}]);

Including your autoscroll functionality in a dedicated service or directive promotes a clean and maintainable codebase.

Scroll to specific elements

There are times in complex SPAs when scrolling to the top of the page isn't a one-size-fits-all solution. In these cases, $anchorScroll can scroll to specific DOM elements:

<!-- Your anchor awaits! ⚓ -->
<div id="anchor-top" ng-view autoscroll="true"></div>

In your code:

app.run(['$anchorScroll', function($anchorScroll) {
  // Using the precision of a Swiss watchmaker ⏱️.
  $anchorScroll.yOffset = 50; // Consider fixed headers or other sticky elements at the top of your page
  $anchorScroll('anchor-top');
}]);

This approach provides detailed control, ensuring your app can handle diverse scrolling requirements.

Single-Page Applications have already revolutionized user experience by eliminating the need for full page refreshes. Here are some pointers to further enhance the navigation experience within your SPAs:

Use CSS scroll-behavior property to create smooth scrolling transitions.
Utilize the History API to record the user’s scrolling behavior.
Consider using third-party libraries to animate page transitions and retain the scroll context.
Always test on multiple devices and browsers to ensure your implementation works across the board.

Lastly, optimizing your scroll event listeners prevents performance issues and ensures smooth, seamless transitions.