Meteor.com doesn’t scroll to top on internal page navigation

testing
1

Hi Meteor team :wave:, I noticed a small UX bug on the meteor website.

When clicking on internal links(links that open in the same tab) — such as from one section of the main page to another or between pages within the same domain — the new page loads correctly, but the scroll position stays where it was
As a result, users often land somewhere in the middle or bottom of the next page instead of starting at the top.

External links (those that open in a new tab) work fine.

Steps to Reproduce

  1. Visit www.meteor.com.
  2. Scroll down to the bottom.
  3. Click on any internal navigation link (for example,“Brand Assets”, “Showcase”, “About” or similar).
  4. Observe that the new page loads, but you stay scrolled down instead of resetting to the top.

Reproduction Video:

Expected Behavior

When navigating between internal pages, the page should automatically scroll to the top — this is the typical behavior for single-page apps.

This issue can be solved by adding a simple scroll-reset component in the React Router setup:
import { useEffect } from ‘react’;
import { useLocation } from ‘react-router-dom’;

function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
export default ScrollToTop;
Placing this inside the app’s layout (just inside the Router) ensures the page scrolls to the top whenever the route changes.

Environment:

  • Browser: (e.g., Chrome 129, Firefox 132)
  • OS: (e.g., Windows 11 / macOS 14)
  • Device: Desktop / Laptop

Hope this helps — happy to provide more detail or a demo if needed!

2 Likes
2

Hi @satvik, thanks for the feedback!

This is actually a regression issue, as we have a ScrollToTop component in the codebase but it was no longer being used. We’ve just fixed the issue and deployed it to production.

3 Likes