Simple back to top

HTML markup, footer.php

<div class="toTop">

	<svg fill="#FFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">

		<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>

		<path d="M0 0h24v24H0z" fill="none"/>

	</svg>

</div>

SASS markup _toTop.scss

.toTop{
    position: fixed;
    bottom: 16px;
    right: 16px;
    background-color: rgba(0,0,0,0.6);
    width: 50px;
    height: 50px;
    display: none;
    cursor: pointer;
    svg, path{
        fill: $secondary_color;
    }
}

JQuery, add this to app.js

	//============================
	// To top, version 1.3
	//============================
	$( ".toTop" ).click(function() {
        $( "body,html" ).animate( {
            scrollTop: 0
        } );
	});
	
	$(document).scroll(function() {
		var y = $(this).scrollTop();
		if (y > 800) {
		  $('.toTop').fadeIn();
		} else {
		  $('.toTop').fadeOut();
		}
	  });