Scroll Page to the Top When Change in States or Props or URL Params – React

Assume that you are working on a product details page for an E-commerce website made using React. You scroll down to the related products section and click another product. The product and the URL change but the page do not scroll to the top. So here, we are discussing a way to scroll the page to the top when there is a change in states or props or URL params.

The problem is visualized with a Gif so that you will get the exact idea.

Prerequisites

The reader should be aware of the following technologies:-

• JavaScript ES6
• React.js library
• What is states, props and URL params

What we will learn

In this article, we will learn the method to scroll the page to the top when there is a change in states or props or URL params.

After completing this article, we will create a product details page demo using React that scrolls to the top when the product URL params change.

Here is the Gif for the live example of the solution we will implement after finishing this article.

Track the change in states or props or URL params with useEffect hook

We can use the useEffect hook to track any change in states or props or URL params.

Let’s take the example that we have discussed before. We are clicking another product from the product details page.

The URL params change from http://localhost:3000/product-1 to http://localhost:3000/product-2.

Here product-1 and product-2 are the slugs of product 1 and product 2 respectively.

We will code the function to fetch the new product and store it in a state whenever this change in URL params changes.

First, we can start by creating a functional component ProductDetails.

export default function ProductDetails(product) {
  ...
  return(
      ...
  )
}

So we need to show the new product instead of the old one with every URL change.

Using the useEffect hook, we can track this change in URL param. The code is given below.

  useEffect(() => {
  ...
  }, [productSlug]);

Scroll the page to the top when a change in URL params occurs

Now let us write the code to scroll the page to the top when the URL param productSlug changes.

  useEffect(() => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  }, [productSlug]);

We took an example of scrolling to the top when there is a change in URL params. We can use this method to scroll to the top with changes in states or props also.

If you need a more understanding of the code, please refer to the Codesandbox repository or GitHub repository.

Codesandbox

Refer to the CodeSandbox link to view the live app. You can clone this project to your CodeSandbox account and edit the code also.

https://codesandbox.io/s/great-margulis-ev55d

GitHub

You can always refer to the GitHub repository to clone this project, refer to the code and work on top of it.

https://github.com/techomoro/scroll-to-top-react-website-demo-app

Summary

So in this article, we discussed the method to scroll the page to the top when there is a change in states, or props, or URL params in a React website.