MDB React 5

Scroll Back To Top link built with Bootstrap 5. Create a button that appears when you start scrolling and on click smooth scrolls you to the top of the page.

Check out React Scroll Back To Top Documentation for detailed instructions & even more examples.

Basic example (Click on the image to see a live demo)

import React from 'react';
import { MDBBtn, MDBContainer, MDBIcon } from 'mdb-react-ui-kit';

function App() {
  let mybutton;

  window.onscroll = function () {
    mybutton = document.getElementById("btn-back-to-top");
    scrollFunction(mybutton);
  };

  function scrollFunction(mybutton) {
    if (
      document.body.scrollTop > 20 ||
      document.documentElement.scrollTop > 20
    ) {
      mybutton.style.display = "block";
    } else {
      mybutton.style.display = "none";
    }
  }

  function backToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }

  return (
    <MDBContainer fluid>


      <MDBBtn 
        onClick={backToTop} 
        id='btn-back-to-top' 
        style={{
          position: "fixed",
          bottom: "20px",
          right: "20px",
          display: "none",
        }} 
        className='btn-floating' 
        color='danger' 
        size='lg'>
        <MDBIcon fas icon="arrow-up" />
      </MDBBtn>


      <div className="container mt-4 text-center" style={{height: '2000px'}}>
        <p>
          Start scrolling the page and a strong
          <strong> "Back to top" button </strong> will appear in the
          <strong> bottom right corner</strong> of the screen.
        </p>

        <p>
          Click this button and you will be taken to the top of the page.
        </p>
      </div>

      <link
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
        rel="stylesheet"
        />
      <link
        href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
        rel="stylesheet"
        />


    </MDBContainer>
  );
}

export default App;

How to use?

1. Download MDB 5 - free REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More extended React documentation

• React Bootstrap Code
• React Bootstrap Gallery
• React Bootstrap Hamburger Menu
• React Bootstrap Jumbotron
• React Bootstrap Maps
• React Bootstrap Mega Menu
• React Bootstrap Media object
• React Bootstrap Multiselect
• React Bootstrap Masonry
• React Bootstrap Contact form
• React Bootstrap Gradients
• React Bootstrap Pagination
• React Bootstrap Panels
• React Bootstrap Social Media icons & buttons
• React Bootstrap Search
• React Bootstrap Table sort
• React Bootstrap Table responsive
• React Bootstrap Table scroll
• React Bootstrap Table search
• React Bootstrap Textarea
• React Bootstrap Sidebar
• React Bootstrap Profiles
• React Bootstrap Nested Dropdown
• React Bootstrap Address Form
• React Bootstrap Address Form