Select Your Language

How To Create a Scroll to Top

       BUTTON
For Blogger Templates

Here’s another hack we learned along the way when creating our beautiful blog. The button that we are about to create looks similar to the one you see floating to the Right32x32 of this screen when you scroll your mouse. Modifications could be made along the way as we will cover below.

Step 1.  Head over to your blogger Layout, Add Gadget, select HTML/Javascript.
Copy and paste the code below in the text section while leaving the title box empty. Some templates may not allow you to move forward unless you place a title. 

If this is the case you will need to place this piece of code: <000> in the Title box as shown below.
 Title

 Know lets place the rest of code below in the content box:

 <!--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: 2em;
right: 0px;
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="http://4.bp.blogspot.com/-ihc-8JR84oI/U_oXILTik7I/AAAAAAAACdQ/CM7w68Bdm1E/s1600/backtotop.png" alt="Back to Top" / ></a>
<!--Smooth Back to Top Button End-->





Note: the areas highlighted in purple. This simply is a line that tells you the coder what this code is about. The yellow highlights state the values that could be changed if you which. For example: size of the button and color. The URL of the image button can also be changed if you have another you will like best.

Make sure you hit preview to make sure there were no mistakes along the way. If the template previews successfully, save template and YOU ARE DONE...

Hint: If template does not preview successfully hit BACK button so changes will not be saved. Go back to your Theme or Template and hit Edit HTML button. Click anywhere in the template box and hit Cntrl + F and in the search bar type <head> . Just below this head tag place the code below without the lines please. 

--------------------------------------------------------------------------------------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
--------------------------------------------------------------------------------------------------

SAVE and go back to Step 1 above in order to add the HTML/Javascript code again in the Add a Gadget side bar.  


Please leave us a comment if this was of any help to you. Also feel free to share with other fellow bloggers to help them get their blog looking like beautiful spaces made perfect  32x32.  HAPPY BLOGGING!

 Return to Blog Archives..
Post a Comment