How to create a Scroll To Bottom button in React JS ?

Last Updated : 30 Nov, 2023

Learn to implement a "Scroll to Bottom" button in React using the useState() hook, a feature commonly seen in chat applications like WhatsApp and Telegram for effortless navigation to the end of a chat window.

Prerequisites:

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app react-scroll-bottom

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd react-scroll-bottom

Step 3: Installing the dependencies required in this project

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

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.1",
    "web-vitals": "^2.1.4",
}

Example: Create a webpage with a "Scroll To Bottom" button in React by managing state with useState(), toggling visibility based on scrolling direction, and using the scrollTo method for smooth navigation to the bottom, enhancing the user experience.

JavaScript

import { Fragment } from 'react';
import ScrollButton from './components/ScrollButton';
import { Content, Header } from './components/Styles';

function App() {
    return (
        <Fragment>
            <Header>GeeksForGeeks Scroll To Bottom</Header>
            <ScrollButton />
            <Content />
            <Header>Thanks for visiting</Header>
        </Fragment>
    );
}

export default App;

JavaScript

//ScrollButton.js

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

const ScrollButton = () => {

    const [visible, setVisible] = useState(true)

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

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

    window.addEventListener('scroll', toggleVisible);

    return (
        <Button>
            <FaArrowCircleDown onClick={scrollToBottom}
                style={{ display: visible ? 'inline' : 'none' }} />
        </Button>
    );
}

export default ScrollButton;

JavaScript

//Style.js
import styled from 'styled-components';

export const Header = styled.h1` 
   text-align: center; 
   left: 50%;
   color: green; 
`;

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

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