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()

Too Long; Didn't Read

Making security fun one episode at a time

Setting Scroll Position in React

Too Long; Didn't Read

Irakli Tchigladze

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Setting Scroll Position in React

Too Long; Didn't Read

Irakli Tchigladze

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES