How To Use Prime-React ScrollTop In React

Hello Developers, In this blog we will learn how we can use prime react scroll top component in our react-app

First, make a new app using the following command

npx create-react-app

Now we will install prime react library in our app

npm i primereact primeicons

Now import all important files in your app js

import { ScrollTop } from 'primereact/scrolltop';
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import { ScrollPanel } from 'primereact/scrollpanel';

Now you are good to go

Now wrap your all elements into the ScrollPanel component and also make sure you wrap the ScrollTop component also else scroll to top button will not appear

<ScrollPanel style={{ height: '250px', width: '250px' }}>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor 
        magna eget est lorem. Amet consectetur adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis 
        auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales 
        neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et 
        netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl 
        nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
    </div>
    <ScrollTop target="parent" threshold={150} className="custom-scrolltop" icon="pi pi-arrow-up" />
</ScrollPanel>

Target property is used to set the target of scroll top

Threshold property is used to define the threshold value of the vertical scroll position of the target to toggle the visibility

Demo: