Blog 101 - How to Create a Scroll to Top Button - {Tutorial}

If you scroll down a little bit, you will see a little arrow appear in the bottom right of the window. That is what I'm going to show you how to achieve today.

--------

Installation:

Note: If you have already installed the JQuery plugin, jump to step 4.

1. From your Blogger Dashboard > Template > Edit HTML 

2. Search for </head> tag.

3. Copy the code below and paste it before </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

4. From your Blogger Dashboard > Template > Edit HTML 

5. Search for </head> tag.

6. Copy the code below and paste it before </head> tag.

<style type="text/css"> #w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;} #w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);} #w2btoTop:active, #w2btoTop:focus {outline:none;} </style> <script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); }); </script>

7. Preview your change and if everything looks good, click save.


Let me know if you like these kinds of "Blog 101" tutorials and if you have any requests, please put them in the comments section and I will do as many as I can. :)

Enjoy and I hope you're having an awesome day!