TC Cup of Codes: Smooth Scroll to The Top

On today's post, I would like to add another enhancement to my blog. As I've been reading my posts on my phone, one thing came to my realization, it's tiring to scroll back up finding home. So I decided to look around on what I could do, which finally led to this snippet for a Scroll Up.

For this tutorial, I would like to use a circular button (you can use any button you want) with an up arrow sign. I believe, in the UX part, it won't be treated as having an ambiguous function (Up Arrow means go to the Top). 

1. Go To Your Layout

There are two ways to do this, the first option is you can go to your Theme section and edit your template. The second option is go to your Layout and add HTML/Javascript widget. For this tutorial, I'm gonna use the second way.

Choose Add A Gadget:

Pick HTML/Javascript:

2. Add The Codes Below

ouou

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32	<!--Smooth Back to Top Button Start--> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration);} else { jQuery('.back-to-top').fadeOut(duration);}}); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false;})});</script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px;} .back-to-top { position: fixed; bottom: 0%; left: 50%; text-decoration: none; color: #000000; font-size: 12px; padding: 1em; display: none;} .back-to-top:hover { text-decoration: none;}</style> <a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0o6j0ShMri8ADgshCFbc6yKh9zI6p0s6h4mlRho1nyxoGUMGwQAFMhQyWjgOKllc5-W5U3viGUONvadVm2V63czLARhYRBYycwfRkpGwuX61hg4jnPoBbQOY9F4fNUuQY0_h_xVut8k/" alt="Back to Top" / /></a> <!--Smooth Back to Top Button End-->

<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);} else {
jQuery('.back-to-top').fadeOut(duration);}});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;})});</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;}
.back-to-top {
position: fixed;
bottom: 0%;
left: 50%;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;}
.back-to-top:hover {
text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0o6j0ShMri8ADgshCFbc6yKh9zI6p0s6h4mlRho1nyxoGUMGwQAFMhQyWjgOKllc5-W5U3viGUONvadVm2V63czLARhYRBYycwfRkpGwuX61hg4jnPoBbQOY9F4fNUuQY0_h_xVut8k/" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->

Let's analyze the codes part by part.

1. The <script> part

The document ready() method will specify a function to execute when the DOM is fully loaded.

?

1	jQuery(document).ready(function()

jQuery(document).ready(function()

The offset will allow you to determine when the button will show up, the duration will determine how long the animation will work (in will be used for the fade in and fade out effect)

?

1 2	var offset = 220; var duration = 500;

var offset = 220;
var duration = 500;

And the last part, here comes the magic. scrollTop() method will set or return the vertical scrollbar position for the elements. It will also use offset to determine whether the page has moved or not.

1 2 3 4 5 6 7 8	jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration);} else { jQuery('.back-to-top').fadeOut(duration);}}); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false;})});

jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);} else {
jQuery('.back-to-top').fadeOut(duration);}});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;})});

So, there you have it. A button to scroll your page up to the top after reading the article you've written. See you on another post!