Scroll Back to Top button

React Bootstrap 5 Scroll Back To Top button 

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.

To learn more read Buttons Docs.

Basic example

When your page is very long you may want to give your users an option to quickly scroll back to the top of the page. In such cases the best solution is to add a button that will appear after the user scrolls a specified number of pixels.

You can specify when the button appears by changing the condition set in the JavaScript code below, document.body.scrollTop for older browsers and document.documentElement.scrollTop for new ones. In the example we've set this to 20 pixels but you may increase this value if you want your button to appear later.

We recommend using this component along with the Smooth scroll functionality.

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>

          </MDBContainer>
        );
      }

      export default App;