More Recent Version:
<style>
.back-to-top {
color: #fff;
cursor: pointer;
display: none;
position: fixed;
right: 2rem;
bottom: 6rem;
background: #35475b;
text-align: center;
width: 50px;
height: 30px;
padding-top: 5px;
}
</style>
<div class="back-to-top" style="display: none;"><span class="u-icon-chevron-up" aria-hidden="true"></span></div>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 75) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
}).trigger('scroll');
$('.back-to-top').on("click",function() {
$('html, body').animate({ scrollTop: 0 }, 'slow', function () {
});
});
</script>
Older version but works great:
### Click this:
<a href="#startherebutton" id="starthere" class="button-oval"><span class="white">Start Here <i class="fa fa-caret-right"></i></span></a>
### Scroll to:
<h2 class="align-center black" name="startherebutton">What Are You Creating?</h2>
### Javascript:
<script>
$('#starthere').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
### with 50 px offset:
<script>
$('#starthere').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top -50
}, 500);
return false;
});
</script>
Another version that works fine:
<style>
.totop {
position: fixed;
bottom: 0;
right: 0;
z-index: 104400;
}
</style>
In footer area:
<span class="totop" style="display: none;"><a class="btn btn-small btn-info mb-2" href="#"><i class="fa fa-chevron-up"></i></a></span>
Jquery script:
<script>
$(document).ready(function () {
function backToTop () {
var chaser = $('.totop');
windowHeight = $(window).height();
if (chaser) {
$(window).scroll(function() {
if ($(window).scrollTop() >= windowHeight / 2) {
chaser.fadeIn();
} else {
chaser.hide();
};
});
chaser.find('a').on('click', function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: '0px'}, 800);
});
};
};
var backToTop = new backToTop;
});
</script>