Animated Scroll To Top

HTML

<span style="display:block;font-size:2em;padding:300px 0 2100px;text-align:center;width:100%;">Scroll down</span>

<a id="js-stt" class="lp-scroll-button"></a>

CSS

/*==============================================
    animated scroll to top
    style to your heart's desire
===============================================*/

.lp-scroll-button {
  background:url('http://placehold.it/78x78') 0 0 no-repeat;
  bottom:30px;
  cursor: pointer;
  display: none;
  height:78px;
  position: fixed;
  right:30px;
  width:78px;
  z-index: 30;
}
      
      /* making button feel subtly more button-like */
      .lp-scroll-button:active {
        bottom: 28px;
        -webkit-transition: all .12s ease-in-out;
        -moz-transition:    all .12s ease-in-out;
        -o-transition:      all .12s ease-in-out;
        transition:         all .12s ease-in-out;
      }

JavaScript

(function($) {

////////////////////////////////////////////////////////
////////////// ANIMATED SCROLL TO TOP //////////////////
////////////////////////////////////////////////////////
 
var	$window			= $(window),
	$bodyHTML		= $('body, html'),
	$jsSTT 			= $('#js-stt'),
	 speedIn		= 400, 	// speed at which button fades in
	 speedOut		= 1, 	// speed at which button fades out
	 show 			= 10, 	// pixels from top when button appears
	 delay 			= 800; 	// how long until it reaches the top


function showArrow(){	
	if ($window.scrollTop() > show) {
    	$jsSTT.fadeIn(speedIn);
  	} else {
    	$jsSTT.fadeOut(speedOut);
  	}
}

function scrollUp(e){
	e.preventDefault();

	$window.off('scroll.Scroller');
	$jsSTT.fadeOut(speedOut);

	$bodyHTML.animate({
    	scrollTop: 0
  	}, delay);

	setTimeout(function() {
		$window.on('scroll.Scroller', showArrow);
	}, delay);
  	
}


// show or hide arrow
$window.on('scroll.Scroller', showArrow);

// click event to scroll to top
$jsSTT.on('click', scrollUp);




})(jQuery);