How to create a scroll to top btn in react js
Tags: react, javascript, webdev, programming
Published: 2023-04-10 17:52:51

 
### Output 

![How to create a scroll to top btn in react js](https://i.ibb.co/h2GdS95/mobile.gif)

---
 

install one package react icons 

```bash
npm i react-icons
```


### ScrollToTop.js Code
```js
import React, { useEffect, useState } from "react";
import { FaAngleUp } from "react-icons/fa";
import "./ScrollToTop.css";
const ScrollToTop = () => {
  const [showTopBtn, setShowTopBtn] = useState(false);

  useEffect(() => {
    window.addEventListener("scroll", () => {
      if (window.scrollY > 400) {
        setShowTopBtn(true);
      } else {
        setShowTopBtn(false);
      }
    });
  }, []);
  const goToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };
  return (
    <>
      <div className="top-to-btn">
        {" "}
        {showTopBtn && (
          <FaAngleUp className="icon-position icon-style" onClick={goToTop} />
        )}{" "}
      </div>
    </>
  );
};

export default ScrollToTop;
```

### ScrollToTop.css Code

```css
.top-to-btn{
    position: relative;
  }
  .icon-position{
    position: fixed;
    bottom: 40px;
    right: 25px;
    z-index: 20;
  }
  .icon-style{
    background-color: #551B54;
    border: 2px solid #fff;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    color: #fff;
    cursor: pointer;
    animation: movebtn 3s ease-in-out infinite;
    transition: all .5s ease-in-out;
  }
  .icon-style:hover{
    animation: none;
    background: #fff;
    color: #551B54;
    border: 2px solid #551B54;
  }
  @keyframes movebtn {
    0%{
      transform: translateY(0px);
    }
    25%{
      transform: translateY(20px);
    }
    50%{
      transform: translateY(0px);
    }
    75%{
      transform: translateY(-20px);
    }
    100%{
      transform: translateY(0px);
    }
  }


  .modal {
    font-size: 12px;
  }
  .modal > .header {
    width: 100%;
    border-bottom: 1px solid gray;
    font-size: 18px;
    text-align: center;
    padding: 5px;
  }
  .modal > .content {
    width: 100%;
    padding: 10px 5px;
  }
  .modal > .actions {
    width: 100%;
    padding: 10px 5px;
    margin: auto;
    text-align: center;
  }
  .modal > .close {
    cursor: pointer;
    position: absolute;
    display: block;
    padding: 2px 5px;
    line-height: 20px;
    right: -10px;
    top: -10px;
    font-size: 24px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #cfcece;
  }
```

### Originally published

 
[https://democoding.netlify.app/post/how-to-create-a-scroll-to-top-button-in-react](https://democoding.netlify.app/post/how-to-create-a-scroll-to-top-button-in-react)
 

---
---
## For more information

 

1. Subscribe my Youtube Channel 
[https://www.youtube.com/@democode](https://www.youtube.com/@democode) 

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Follow me on Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Check out my Facebook Page 
[Programming memes by Coder](https://www.facebook.com/programmingmemesbycoders)

5. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

 

---
---

{% instagram CqObFa6PR0l %}

---

{% link https://dev.to/jon_snow789/21-programming-memes-refresh-your-mind-1fa0 %}

---
---

### If you want to support us, we don't want any payment from you, just do one thing 

### Subscribe our [youtube Channel](https://www.youtube.com/@democode)  

---