Adding a scroll-to-top button creates a conveniant way for readers to get back to your top navigation, especially for a lengthy page on a mobile screen. Below is an example of a scroll-to-top button that appears when scrolling down a specific distance and disappers when scrolled back to the top.
Make sure you have the jQuery script at the bottom of your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Tip: It’s best practice to store your javascript in a separate file and calling it after your jQuery source tag instead of including it in your markup.
<a href="#" class="scrollBtn">
<span>^</span>
</a>
.scrollBtn {
text-align: center;
background: rgba(0,0,0,0.5);
padding: 0.5em 0.5em 0em 0.5em;
bottom: 0;
right: 0;
margin: 0 1em 0.7em 0;
position: fixed;
font-size: 1.5em;
font-weight: 700;
color: #f7f7f7;
border-radius: 3px;
}
a:hover.scrollBtn,a.scrollBtn {
text-decoration: none;
}
$(function() {
'use strict';
var myButton = $('.scrollBtn');
var myWindow = $(window);
myButton.hide();
myWindow.on('scroll', function() {
if ($(this).scrollTop() > 800) { //height from top to trigger
myButton.show();
}
else {
myButton.hide();
}
});
myButton.click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
You can see this in action on any of my pages. Shoot me a message if you have any questions.