Integrating Smooth Scroll Effects in Scroll Restoration

Demonstrate how to enhance user experience by implementing smooth scrolling effects when restoring scroll position in a TanStack Router-based application.

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

Imports necessary hooks from TanStack Router (formerly React Router) and useEffect hook from React.

const ScrollToTop = () => {
  const location = useLocation();
  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }, [location.pathname]);
  return null;
};

Defines a ScrollToTop component that listens for changes in the pathname and triggers a smooth scroll to the top of the page.

const RestoreScrollPosition = () => {
  const navigate = useNavigate();
  useEffect(() => {
    // Assume restorePosition is a function that fetches the
    // previously saved scroll position.
    const position = restorePosition() || { x: 0, y: 0 };
    window.scrollTo({
      left: position.x,
      top: position.y,
      behavior: 'smooth'
    });

    return () => {
      // Assume savePosition is a function that saves the current scroll position
      savePosition(window.scrollX, window.scrollY);
    };
  }, [navigate]);
  return null;
};

Creates a component to restore the scroll position smoothly on navigation. It uses a navigate effect to determine when the page has changed and smoothly scrolls to the saved position.