In this article, I am going to show how to integrate Top to Back button n react

First, create a react project

• npx create-react-app your -project
• cd your-project

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.jsx and Styles.js.

Example: In this example, we will design a webpage with Scroll To Top 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 false 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 true when we scroll down the page more than 300px ( you can choose any value as per your choice). Otherwise, the state value is set to false.

Then a function is created by the name scrollToTop in which we use the scrollTo method to scroll our page to the top. When we scroll down the page more than 300px, the function toggleVisible gets triggered as an event through window.addEventListener property and sets the state visible to true. Now our state is used to show the Scroll to top icon to the user. When the user clicks on this icon, the function scrollToTop gets triggered as an onClick() event which scrolls our page smoothly to the top. You can also use ‘auto’ behavior in place of ‘smooth’.

ScrollButton.jsx

Copy and paste the below code

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

Styles.js

Copy and paste the below code

import styled from 'styled-components';


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

App.jsx

import React, { Fragment} from 'react'
import ScrollButton from '../src/Components/ ScrollButton'
import { Content, Heading } from './Components/Styles';
import'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Home from './Home'
import About from './About'
import Footer from "../src/Components/Footer"
import Myservice from './Myservice'
import Contact from './Contact'
import Navigation from './Navigation'
import { Redirect, Route, Switch } from 'react-router'

const App= ()=> {
   return (
      <>
      <Navigation />
      <Switch>
               <Route exact path="/" component={Home} />
               <Route exact path="/contact" component={Contact} />
               <Redirect to="/"  />
              
      </Switch>
           <Fragment>
               <ScrollButton />
           </Fragment>
          <Footer />
      </>
   )
}

export default App