The <ScrollArea/> component from shadcn's UI library provides an elegant scrolling experience, but it doesn't include built-in functionality for scrolling to the top of the content area. In this post, we'll walk through how to add a "Scroll to Top" button that smoothly scrolls the <ScrollArea/> to its beginning.

Step 1: Import useRef from React

import { useRef } from "react";

Step 2: Create a ref for the <ScrollArea/>

const scrollAreaRef = useRef<HTMLDivElement | null>(null);

This line creates a mutable ref object that will hold a reference to the <ScrollArea/> div element.

Step 3: Attach the ref to the top <div>

<div ref={scrollAreaRef}>
  {/* ScrollArea content goes here */}
</div>

Just like this

Step 4: Define the triggerScrollToTop function

const triggerScrollToTop = () => {
  if (scrollAreaRef.current) {
    scrollAreaRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
};

This function checks if scrollAreaRef.current has a value (i.e., if the <ScrollArea/> has mounted). If so, it calls the scrollIntoView method on the element, passing options to ensure smooth scrolling to the top.

Step 5: Add a "Scroll to Top" button

<button
  onClick={triggerScrollToTop}
>
  Scroll to Top
</button>

Finally, render a button that calls triggerScrollToTop when clicked. Adjust the styling and placement as desired.

And that's it! With these steps, you've added smooth scroll-to-top functionality to shadcn's <ScrollArea/> component using just a few lines of React code.