How to create a Scroll to Top Button in ReactJS

Creating a "Scroll to Top" button in a ReactJS application involves a few steps. You'll need to create a button component, handle the scroll event to show or hide the button, and then implement the functionality to scroll back to the top of the page when the button is clicked. Here’s a simple guide to achieving this:

1. Create a ref

In your layout.(tsx | jsx) create a reference in a top of the DOM structure.

1 const topRef = React.useRef < HTMLDivElement > null;

Connect it to the top element

1 <div className='container' ref={topRef}>
2   ...Rest of the content
3 </div>

3. Create a handleScrollToTop function

1 const handleScrollToTop = () => {
2   window?.scrollTo({
3     top: topRef.current?.offsetTop,
4     behavior: 'smooth',
5   });
6 };

4. Create a React state

1 const [showButton, setShowButton] = React.useState(false);
2 
3 React.useEffect(() => {
4   const handleScrollButtonVisibility = () => {
5     window?.pageYOffset > 1200 ? setShowButton(true) : setShowButton(false);
6   };
7   window?.addEventListener('scroll', handleScrollButtonVisibility);
8 
9   return () => {
10     window?.removeEventListener('scroll', handleScrollButtonVisibility);
11   };
12 }, []);

5. Create the Button Component

1 // ScrollToTopButton.tsx
2 import React from 'react';
3 
4 import { Button } from '@/components/ui/button';
5 
6 const ScrollToTopButton = ({ onClick }: { onClick: () => void }) => {
7   return (
8     <Button
9       className='fixed bottom-5 right-7 z-50 cursor-pointer rounded'
10       variant='secondary'
11       onClick={handleScrollToTop}
12     >
13       <svg
14         width='18px'
15         height='18px'
16         viewBox='-0.5 0 25 25'
17         fill='none'
18         xmlns='http://www.w3.org/2000/svg'
19       >
20         <path
21           d='M8 13.8599L10.87 10.8C11.0125 10.6416 11.1868 10.5149 11.3815 10.4282C11.5761 10.3415 11.7869 10.2966 12 10.2966C12.2131 10.2966 12.4239 10.3415 12.6185 10.4282C12.8132 10.5149 12.9875 10.6416 13.13 10.8L16 13.8599'
22           stroke='#000000'
23           strokeWidth='1.5'
24           strokeLinecap='round'
25           strokeLinejoin='round'
26         />
27         <path
28           d='M3 7.41992L3 17.4199C3 19.6291 4.79086 21.4199 7 21.4199H17C19.2091 21.4199 21 19.6291 21 17.4199V7.41992C21 5.21078 19.2091 3.41992 17 3.41992H7C4.79086 3.41992 3 5.21078 3 7.41992Z'
29           stroke='#000000'
30           strokeWidth='1.5'
31           strokeLinecap='round'
32           strokeLinejoin='round'
33         />
34       </svg>
35     </Button>
36   );
37 };
38 
39 export default ScrollToTopButton;

6. Integrate the Button in Your App

1 {
2   showButton && <ScrollToTopButton onClick={handleScrollToTop} />;
3 }

This approach ensures the button appears when the user scrolls down and smoothly scrolls the page back to the top when clicked. Feel free to customize the button and its behavior to fit the design and functionality of your application!