Minimal Back To Top Functionality with jQuery and CSS3

A simplest implementation of a smooth back to top functionality using jQuery, JavaScript and CSS/CSS3.

How to implement it:

1. Create an anchor link for the back to top button.

<a href="#myAnchor" class="go-top">
  Icon, Text, Button, etc...
</a>

2. The required CSS to style & position the back to top button.

.go-top {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 35px;
  text-align: center;
  font-size: 30px;
  position: fixed;
  bottom: -40px;
  right: 20px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #404040;
  color: #FFFFFF;
  text-decoration: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.go-top.show { bottom: 20px; }

.go-top:hover {
  background-color: #5DBA9D;
  color: #FFFFFF;
}

3. Load the needed jQuery JavaScript library at the end of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

4. The JavaScript to add/remove CSS classes to the back to top button when scroll down/up.

$(window).scroll(function(event){
  var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      $(".go-top").addClass("show");
    } else {
      $(".go-top").removeClass("show");
    }
});

5. Scroll the window back to the top of your web page smoothly when you click the back to top button.

$('a').click(function(){
  $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
  }, 1000);
});

---

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