In this article, you’ll learn how to use the method to set the scroll position to help users find what they’re looking for. You will also learn to scroll automatically or in response to click and submit events. scrollTo() scrollTo() method is one of many useful methods available on the interface. It allows you to scroll down (or across) by a specified number of pixels. For example, scroll 1000 pixels down. scrollTo() window The method takes one argument: an options object, which is a dictionary that specifies the scroll position and its animation type. The object can have three properties: – specifies the number of pixels to scroll down. top – specifies the number of pixels to scroll across. left – specifies the scrolling animation. behavior An absolute majority of modern web applications are scrollable only vertically. For this reason, in practice, you will only use and properties. top behavior Practical use cases You can use method to scroll down in response to , , and other events. scrollTo() click submit It’s also possible to use in lifecycle methods (and hook) to automatically set scroll position when the component mounts or re-renders. scrollTo() useEffect() Set scroll position to specific coordinates Let’s look at a code example where clicking a button sets the scroll position to a specific section of the page: <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        onClick={() => window.scrollTo({ top: 1000, behavior: "smooth" })}
      >
        Learn more
      </button>
      <div style={{ height: 1000 }}></div>
      <p>
        Lorem ipsum…
      </p>
      <div style={{ height: 1000 }}></div>
</div> shows a page with two heading elements, a button, and two elements that add 1000 pixels of white space. CodeSandbox live demo <div> Clicking the button scrolls 1000 pixels down, so the viewport shows the paragraph text. Alternatively, you can use lifecycle methods (or the hook) to set the scroll position when the component mounts or every time it renders. useEffect() export default function App() {
  useEffect(() => window.scrollTo({ top: 1000, behavior: "smooth" }), []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
        Learn more
      </button>
      <div style={{ height: 1000 }}></div>
      <p>
        Lorem ipsum…
      </p>
      <div style={{ height: 1000 }}></div>
    </div>
  );
} The dependency array determines the frequency at which the method is called. Read to learn more about it. this guide Two ways to set scroll position to a certain element in React On some occasions, you might need to scroll a certain element into view. To start, you need some way to reference that element in React. Access DOM elements in React In plain JavaScript, you might use to access DOM elements. Things work differently in React. You need to create a to store a reference to the DOM element. getElementById() ref Using the scrollTo() method To scroll the element into view, set property to the number of pixels between the element and the top of the page. The value is stored in property. top ref.current.offsetTop function App() {
  const paragraphRef = useRef(null);
  return (
    <div className="App">
      <button
        onClick={() =>
          window.scrollTo({
            top: paragraphRef.current.offsetTop,
            behavior: "smooth"
          })
        }
      >
        Learn more
      </button>
      <p ref={paragraphRef}>
        Lorem Ipsum…
      </p>
    </div>
  );
} Using the scrollIntoView() method You can also use the method to scroll to an element in React. scrollIntoView() There’s an important difference between the two methods. You need to call the method on the element itself. scrollIntoView() Let’s look at an example: function App() {
  const paragraphRef = useRef(null);
  return (
    <div>
      <button
        onClick={() =>
          paragraphRef.current.scrollIntoView({
            behavior: "smooth",
            block: "start"
          })
        }
      >
        Scroll to element
      </button>
      <p ref={paragraphRef}>
        Lorem ipsum…
      </p>
    </div>
  );
} This is arguably a more readable way to scroll to an element in React. You can also use this method to . scroll to bottom in React Conclusion Hopefully, learning about method and its many use cases can help you improve the user experience of your app. In this article, we also explored different ways to set a scroll position to a specific element in React. scrollTo()

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Setting Scroll Position in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Guide To The render() Method in React

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

A Quick Guide To The render() Method in React

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps