You will see, there are lots of chat applications such as WhatsApp, Telegram, etc, that are using a useful feature like if you’re in the middle of a chat window, and you want to go to the bottom of the page then you can use this button to scroll down automatically like skip to the content. The following example covers how to create a Scroll To Bottom button in React JS using useState() hook.
Prerequisite:
- Basic knowledge of npm & create-react-app command.
- Basic knowledge of styled-components.
- Basic Knowledge of useState() React hooks.
Basic Setup: You will start a new project using create-react-app so open your terminal and type.
npx create-react-app react-scroll-bottom
Now go to your react-scroll-bottom folder by typing the given command in the terminal.
cd react-scroll-bottom
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.
Example: In this example, we will design a webpage with Scroll To Bottom button, for that we will need to manipulate the App.js file and other created components file.
We create a state with the first element visible as an initial state having a value of the true and the second element as function setVisible() for updating the state. Then a function is created by the name toggleVisible which sets the value of the state to false when we are scrolling down the page. Otherwise, the state value is set to true.
Then a function is created by the name scrollToBottom in which we use the scrollTo method to scroll our page to the bottom. Now our state is used to show/hide the Scroll to bottom icon to the user. When the user clicks on this icon, the function scrollToBottom gets triggered as an onClick() event which scrolls our page smoothly to the bottom. You can also use ‘auto’ behavior in place of ‘smooth’. While scrolling down the page, the function toggleVisible also gets triggered as an event through window.addEventListener property and sets the state visible to false, which in turn hides our icon. When we return back to the top of the page by scrolling up ourselves, the state value updates to true and the icon again starts showing up.
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; |
Styles.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; ` |
App.js
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; |
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/, you will see the following output.
- Using default behavior (auto): See how it directly jumps to the bottom.
- Using smooth behavior: See how it goes smoothly to the bottom.
