![Blog Cover](https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwbbo00ylt9czx6y4n6pn.jpg)
React Component to Smooth Scroll to the Top
![Pranav Birajdar](https://media.dev.to/cdn-cgi/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F588257%2F05f6b652-102e-4914-b734-c783211c37f6.jpg)
Pranav Birajdar
March 17, 2021
440 💖
It's kinda rare to find a smooth scrolling button that takes you to the top of the page on modern blogging websites, especially the ones that are a long 15 minute read!
However, whenever I come across one, I always tend to use it and appreciate the elegance of this simple button that has such a specific job.
After perusing Stack Overflow and GitHub for solution, I came across an elegant React component that uses Hooks and wanted to share it with this community!
Our button should function like this:
These are following test-cases for our component:
- Button should always be at the right bottom of the page
- Button should be hidden and should only appear when we scroll for a certain height
- On clicking it, we should be smoothly taken to the top of the page
The Hook component achieves the following functionality.
import React, { useEffect, useState } from "react";
export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false);
// Top: 0 takes us all the way back to the top of the page
// Behavior: smooth keeps it smooth!
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth"
});
};
useEffect(() => {
// Button is displayed after scrolling for 500 pixels
const toggleVisibility = () => {
if (window.pageYOffset > 500) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);
//scroll-to-top classes: fixed, bottom:0, right:0
return (
<div className="scroll-to-top">
{isVisible && (
<div onClick={scrollToTop}>
<h3>Go up!</h3>
</div>
)}
</div>
);
}
We're almost done! Just import this component in your react file and stick it at the very end.
And voila, it should work!
Here is a basic, quick, and ugly demo of how it should function!