How to Scroll to the Top of a Page in React

To scroll to the top of a page in React, call window.scrollTo({ top: 0, left: 0}).

JavaScriptCopied!

import { useRef } from 'react';

const allCities = [
  'Tokyo',
  'New York City',
  'Paris',
  'London',
  'Dubai',
  'Sydney',
  'Rio de Janeiro',
  'Cairo',
  'Singapore',
  'Mumbai',
];

export default function App() {
  const ref = useRef(null);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
  };

  return (
    <div>
      <h2>Top of the page</h2>

      <div style={{ height: '100rem' }} />

      <div ref={ref}>
        {allCities.map((fruit) => (
          <h2 key={fruit}>{fruit}</h2>
        ))}
      </div>

      <button onClick={scrollToTop}>Scroll to top</button>

      <div style={{ height: '150rem' }} />
    </div>
  );
}

The window.scrollTo() method scrolls to a particular position in a page.

JavaScriptCopied!

const scrollToTop = () => {
  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
};

We could have called it with two arguments: window.scrollTo(0, 0).

But this overload doesn’t let us set a smooth scroll behavior.

When behavior is smooth, the browser scrolls to the top of the page in a gradual animation.

But when it’s auto, the scroll happens instantly. We immediately jump to the top of the page.

We use the onClick prop of the button to set a click listener.

This listener will get called when the user clicks the button.

Scroll to bottom of page in React

To scroll to the end of the page in React, we use a different approach.

We create an element at the end of the page.

We set a ref on it.

Then we scroll to it by calling scrollIntoView() on the ref.

JavaScriptCopied!

import { useRef } from 'react';

const allCities = [
  'Tokyo',
  'New York City',
  'Paris',
  'London',
  'Dubai',
  'Sydney',
  'Rio de Janeiro',
  'Cairo',
  'Singapore',
  'Mumbai',
];

export default function App() {
  const bottomRef = useRef(null);

  const scrollToBottom = () => {
    bottomRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <h2>Top of the page</h2>
      <button onClick={scrollToBottom}>Scroll to bottom</button>

      <div style={{ height: '100rem' }} />

      <div>
        {allCities.map((fruit) => (
          <h2 key={fruit}>{fruit}</h2>
        ))}
      </div>

      <div style={{ height: '150rem' }} />

      <div ref={bottomRef}></div>
      <h2>Bottom of the page</h2>
    </div>
  );
}

scrollIntoView() scrolls to a certain element on the page.

By calling it on the bottom element, we scroll to the page end.

Like scrollTo(), scrollIntoView() has a behavior option that controls the scrolling motion.

JavaScriptCopied!

const scrollToBottom = () => {
  bottomEl?.current?.scrollIntoView({ behavior: 'smooth' });
};

smooth scrolls to the element in an animation.

auto jumps to the element on the page instantly. It’s the default.

To access the bottom element, we set a React ref on it.

We create a ref object with the useRef hook and set the element’s ref prop to it.

JavaScriptCopied!

const bottomEl = useRef(null);

Doing this sets the ref object’s current property to the element’s HTMLElement object.

useRef returns a mutable object that maintains its value when a component updates.

Also, modifying the value of this object’s current property doesn’t cause a re-render.

This is unlike the setState update function return from the useState hook.

Key takeaways

• In React, to scroll to the top of a page, call window.scrollTo() with { top: 0, left: 0, behavior: 'smooth' }.
• Setting the behavior property to 'smooth' provides a gradual animated scroll to the top, while 'auto' causes an instant jump to the top.
• To scroll to the bottom of a page in React, call scrollIntoView() on a specific element by creating a ref for it using the useRef hook.
• By setting the behavior property to 'smooth', the browser will smoothly scroll to the referenced element at the bottom of the page.
• useRef is used to create a mutable reference to an element, allowing access to its properties without causing a re-render.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.