React Top Bottom Scroll

Add a user-friendly scroll-to-top/bottom button to your React applications.

Features

• Smooth scrolling: Seamlessly animates scrolling to the top or bottom of the page.
• Customizable: Customize colors, icons, and titles to match your project's style.
• Adaptive: Intelligently shows or hides the button based on scroll position.
• Flexible: Scroll to specific elements using refs.
• Easy to use: Integrates seamlessly into any React project.

Demo

See a working demo

Installation

1npm install react-top-bottom-scroll

or

yarn add react-top-bottom-scroll

Usage

1import ScrollUpDown from 'react-top-bottom-scroll';
2
3function MyComponent() {
4  return (
5    <div>
6      {/* ... your content ... */}
7      <ScrollUpDown />
8    </div>
9  );
10}

Props

Prop	Type	Default	Description
bottomRef	React.Ref	null	Ref of an element to scroll to the bottom of.
topRef	React.Ref	null	Ref of an element to scroll to the top of.
id	string	""	Optional ID of a specific element to scroll to.
smooth	boolean	true	Whether to scroll smoothly. Set to false for immediate scrolling.
upIconColor	string	"white"	Color of the up arrow icon.
downIconColor	string	"white"	Color of the down arrow icon.
upTitleMessage	string	"Scroll to top"	Title attribute for the up button.
downTitleMessage	string	"Scroll to bottom"	Title attribute for the down button.
style	object	{}	Additional styles to apply to the button.
renderIcon	(direction: "up" | "down") => JSX.Element	null	Custom function to render icons.

Warning

The default z-index is 10001. If other elements on your page have higher z-indices, the button might be hidden. If this occurs, you can set a custom z-index using the style prop.

Contributing

Contributions are welcome! Please create a pull request with your changes.

License

MIT