Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-back-to-top

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. https://mdbootstrap.com/docs/react/extended/back-to-top/
https://github.com/mdbootstrap/react-back-to-top

back bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js react scroll top

Last synced: about 2 months ago
JSON representation

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. https://mdbootstrap.com/docs/react/extended/back-to-top/

Awesome Lists containing this project

README 

        
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# 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](https://mdbootstrap.com/docs/b5/react/extended/back-to-top/) for detailed instructions & even more examples.



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

[![React Scroll Back To Top Basic Example](https://user-images.githubusercontent.com/108793661/182842001-c85489a0-9a23-4462-86be-bb2441011166.png)](https://mdbootstrap.com/docs/react/extended/back-to-top#section-basic-example)

```js

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 (

    



      

        

      



      


        


          Start scrolling the page and a strong

           "Back to top" button  will appear in the

           bottom right corner of the screen.

        



        


          Click this button and you will be taken to the top of the page.

        


      



      

      



    

  );

}



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](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More extended React documentation