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 theHTML/JavaScriptAdd then click on
on right side as shown in the image below.
#Step 3.
Now this popup will be reload, you will see to two input Fields 1st for Title and 2nd forContent, 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. ThisScroll 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.
