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();
}
});