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!
