Animated Back To Top Button With JavaScript And CSS3

Preview:

Description:

In this post, we’ll build a beautiful animated back to top button that auto reveals & hides when scrolling through the page. This animated back to top button also can work on mobile devices nicely.

How to use it:

1. Add an emoji, text, or SVG back to top button to your webpage.

<span id="backtotop-btn">
  <!------------------------->
  <!-- ROCKET EMOJI BUTTON -->
  <!------------------------->
  <span class="rocket">🚀</span>
  <!----------------->
  <!-- TEXT BUTTON -->
  <!----------------->
  <!-- <span class="text">Back To Top</span> -->
  <!-------------------------->
  <!-- ARROW TOP SVG BUTTON -->
  <!-------------------------->
  <!-- <img class="arrow-top" src="/path/to/up-arrow.svg"> -->
</span>

2. Make the back to top button fixed on the page.

#backtotop-btn {
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  right: 16px;
  bottom: 16px;
  user-select: none;
  transition: 1s;
}

3. Load the main script at the end of the document.

<script src="backtotop.js"></script>

4. Apply your own CSS animations to the back to top button.

.slide-in-bottom {
  -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-top {
  -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-in-bottom {
  0% {
      -webkit-transform: translateY(1000px);
      transform: translateY(1000px);
      opacity: 0;
  }
  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
      -webkit-transform: translateY(1000px);
      transform: translateY(1000px);
      opacity: 0;
  }
  100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
  }
}
@-webkit-keyframes slide-out-top {
  0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateY(-1000px);
      transform: translateY(-1000px);
      opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateY(-1000px);
      transform: translateY(-1000px);
      opacity: 0;
  }
}