Sagitarius Kusadhi - Back to top button is the important part of navigation. In this tutorial i will share a awesome jQuery smooth scrolling back to top button. The best thing about this Back To Top Button
is that it appears on the right side bottom beside the scroll down of
the browser only when the user scrolls down the page and disappears as
he scrolls up. Easy to load because it only made with html and css it
doesn't have any image.
Adding this Back To Top Button in blogger blog is very simple you just need to follow this step by step guide.Step 1
Log in to Blogger dashboard and select your blog and Now Navigate to Layout section and click on Add a Gadget
Step 2
After click on Add a Gadget a popup will be open then scroll down and find the HTML/JavaScriptAdd
Step 3
Now this popup will be reload, you will see to two input Fields 1st for Title and 2nd for Content, dont need to fill Title field only past the below code in Content field.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <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; background-color: rgba(235, 235, 235, 0.80); font-size: 12px; padding: 1em; display: none; }
.back-to-top:hover { background-color: rgba(135, 135, 135, 0.50); text-decoration: none; } </style>
<a href="#" class="back-to-top">Back to Top</a>
Step 5
Now Click on Save Button. and You'r Done!
#Important
Back To Top Button with smooth scrolling is working properly i have tested this. This Scroll to Top Buttons
is easy to install because you don't need to add this under template.
If you need any help feel free to ask just Leave a comment, I would be
happy to hear from you.
EmoticonEmoticon