Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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;
`


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000



Last Updated : 30 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads