When your infinite scrolling or Auto pager is enabled, be sure to put a cool back to top button because scrolling all the way up through your God-knows-how-many posts could be a bit frustrating for your readers/visitors. Making a quick search on Google would lead you to so much result that you won’t be able to decide which to choose.
Well, just to add up with the confusion, here’s a tutorial to put a nice Back-to-top button to your blog like the one in this blog.
Proceed to your blog’s Customize page then click on the Edit HTML button. After that, paste these codes just above the </style> tag of your HTML codes:
#scrollToTop {
cursor: pointer;
position: fixed;
background-color: #EEE;
z-index: 300;
display: block;
color: #222;
text-align: center;
font-size: 13px;
border: 1px solid #BBB;
box-shadow: 0 0 0 1px #fff inset, 0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px #fff inset, 0 1px 4px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 0 1px #fff inset, 0 1px 4px rgba(0,0,0,.2);
right: 15px;
bottom: -6px;
width: 70px;
padding: 10px;
-moz-transition: bottom 250ms ease-in-out;
-webkit-transition: bottom 250ms ease-in-out;
border-radius: 5px 5px 0 0;
text-shadow: 0 1px white;
}
#scrollToTop.offscreen {
bottom: -100px;
-moz-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
}
#scrollToTop:hover {
background-color: #f4f4f4;
color: #000;
}
#scrollToTop:active {
padding: 10px 10px 11px;
}
That will be your Back-to-top button’s CSS/style. That would make it look like the one in this blog. If you know bits of CSS, you can edit these to suit your liking.
Next, after that, paste these codes just after the <head> section of your codes:
<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#scrollToTop").addClass("offscreen");
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#scrollToTop').removeClass("offscreen");
} else {
$('#scrollToTop').addClass("offscreen");
}
});
// scroll body to 0px on click
$('a#scrollToTop').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
This jQuery codes will be the one doing the hiding and showing up of the Back-to-top button. See that bold, underlined text(1000)? You can change that to any number you like to change when the button will appear. 1000 means the button will appear if you’ve reached 1000px from the top. If you are somewhere less than 1000px, the button will hide.
Lastly, add this link just before the </body> tag:
<a href="javascript:;" id="scrollToTop">Scroll to top</a>
That’s it! After that, click on the Update Preview button, then once the Save Button appears, click on it, too. Close the Customize Page and check it in your blog!
