How to Create a Scroll To Top Button in React JS ?

Last Updated : 09 Jan, 2025

You will see there are lots of websites, that are using a useful feature like if you're scrolling the webpage, and now you are at the bottom of that page then you can use this button to scroll up automatically like skip to the content. The following example covers create a Scroll To Top button in React JS using useState() hook.

Prerequisite:

Approach

To create a scroll to top button in react we will use the JavaScript scrollTo method. Define a scroll button and toggle its visibility at some scroll point. Define a function scroll to top using link it to click event in scroll to top button. We will use styled-components for styling the button and the components.

Steps to SetUp React App and Install Required Modules

Step 1: Initialize React Project

You will start a new project using create-react-app so open your terminal and type.

npx create-react-app react-scroll-top

Step 2: Switch to the Project Directory

Now go to your react-scroll-top folder by typing the given command in the terminal.

cd react-scroll-top

Step 3: Install Required module

Install the dependencies required in this project by typing the given command in the terminal.

npm install --save styled-components
npm install --save react-icons

Now create the components folder in src then go to the components folder and create two files ScrollButton.js and Styles.js.

Project Structure:

The file structure in the project will look like this.

The updated dependencies in the package.json file are:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.13",
    "web-vitals": "^2.1.4"
},

Example: This example demonstrates how to create scroll to top button with the help of scrollTo method and useState to toggle the button visibility.

JavaScript

// Filename - App.js

import { Fragment } from "react";
import ScrollButton from "./components/ScrollButton";
import { Content, Heading } from "./components/Styles";

function App() {
	return (
		<Fragment>
			<Heading>GeeksForGeeks</Heading>
			<Content />
			<ScrollButton />
		</Fragment>
	);
}

export default App;

JavaScript

// components/ScrollButton.js

import React, { useState } from "react";
import { FaArrowCircleUp } from "react-icons/fa";
import { Button } from "./Styles";

const ScrollButton = () => {
	const [visible, setVisible] = useState(false);

	const toggleVisible = () => {
		const scrolled = document.documentElement.scrollTop;
		if (scrolled > 300) {
			setVisible(true);
		} else if (scrolled <= 300) {
			setVisible(false);
		}
	};

	const scrollToTop = () => {
		window.scrollTo({
			top: 0,
			behavior: "smooth"
			/* you can also use 'auto' behaviour
         in place of 'smooth' */
		});
	};

	window.addEventListener("scroll", toggleVisible);

	return (
		<Button>
			<FaArrowCircleUp
				onClick={scrollToTop}
				style={{ display: visible ? "inline" : "none" }}
			/>
		</Button>
	);
};

export default ScrollButton;

JavaScript

// components/Styles.js

import styled from "styled-components";

export const Heading = styled.h1`
	text-align: center;
	color: green;
`;

export const Content = styled.div`
	overflowy: scroll;
	height: 2500px;
`;

export const Button = styled.div`
	position: fixed;
	width: 100%;
	left: 50%;
	bottom: 40px;
	height: 20px;
	font-size: 3rem;
	z-index: 1;
	cursor: pointer;
	color: green;
`;