Smooth Back To Top Button In jQuery

A tiny jQuery script for creating a custom smooth back to top button that automatically fades in/out on page scroll.

How to use it:

1. Insert a back to top link into your document.

<a href="" class="scrollup">
  <img src="up.svg" alt="Back To Top" />
</a>

2. Stick the back to top link to the right bottom of the page and make it hidden on page load.

.scrollup {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  text-align: center;
  padding: 10px;
  z-index: 100;
  display: none;
}

3. Load the necessary jQuery library in the document.

<script src="/path/to/cdn/jquery.min.js"></script>

4. Fade in the back to top link when the page is scrolled down more than 600px.

$(window).scroll(function() {
  if ($(this).scrollTop() > 600) {
    $(".scrollup").fadeIn();
  } else {
    $(".scrollup").fadeOut();
  }
})

5. Enable the link to smoothly scroll the page to the top.

$(".scrollup").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, 600);
  return false;
})

---

This awesome jQuery plugin is developed by DCODESHOW. For more Advanced Usages, please check the demo page or visit the official website.