How to smoothly scroll to a specific content or element in React?

question react front-end
Ram Patra Published on February 19, 2024

To implement scrolling to a specific content or element on click in a React application, you can follow these steps:

  1. Identify the element you want to scroll to by giving it an id.
  2. Implement a function that handles the scrolling behavior.
  3. Attach an event listener, such as an onClick handler, to the element that triggers the scrolling function.

Here’s how you can do it in a React component:

import React from 'react';

function scrollToElement(id) {
  const element = document.getElementById(id);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });

function MyComponent() {
  return (
      <button onClick={() => scrollToElement('myContent')}>
        Scroll to Content
      <div style= />
      <div id="myContent">
        Content to scroll to

export default MyComponent;

In this example:

  • We have a button that triggers the scrolling behavior when clicked.
  • The scrollToElement function takes the id of the element to scroll to, finds the corresponding element using document.getElementById, and then calls scrollIntoView on it with { behavior: 'smooth' }.
  • Below the button, there’s a placeholder <div> with some height to create space for scrolling.
  • Following that, there’s the content we want to scroll to, which has the id of 'myContent'.

This example demonstrates scrolling within the same page. If you’re navigating to a different page within a Next.js application and want to scroll to a specific content element on that page, you would typically pass some sort of identifier or reference to the destination page and then trigger the scrolling behavior once the new page is mounted.

Now, to make the above method a bit more polished, we can do two things:

  1. Prevent `#` from being appended to the url on click of an anchor tag
  2. Add a `padding` option which will determine the offset from the top of the element to stop scrolling before
export function scrollToElement(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string, padding: number = 0) {
    const element = document.getElementById(id);
    if (element) {
        const targetPosition = element.getBoundingClientRect().top + window.scrollY - padding;
        window.scrollTo({ top: targetPosition, behavior: "smooth" });

Now, you can call this method from an anchor tag like this:

<a href="#" onClick={(e) => {scrollToElement(e, 'myContent', 80)}}>Click</a>
Ram Patra Published on February 19, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question react front-end February 1, 2024 What's the use of key prop in Suspense component in React?

In React, the key prop is used to uniquely identify and track a set of elements during their life cycle. When used with the Suspense component, the key prop helps React keep track of suspended components and their associated data dependencies.

question react front-end March 9, 2024 How to create css styles for specific components in React?

You can use React Context to manage styles for specific components or groups of components. It involves creating a context that provides style information to its consumer components. Here’s a more detailed explanation of how you can implement this approach:

question react front-end February 2, 2024 What's the use of useEffect hook in React?

In React, the useEffect hook is used to perform side effects in functional components. Side effects can include data fetching, subscriptions, manual DOM manipulations, and other operations that cannot be handled during the render phase.