Add Floating - jQuery Based Smooth - Scroll or Back To Top Button In Blogger Blogs

Updated On 22nd September, 2016: Added the functionality to make the scrolling smooth via jQuery.

---

If you have some longs posts or a list of loyal readers who love to comment a lot on your blog, then it may create a small problem to other visitors, who would wish to come quickly to the top of the blog, after reading a post and it's comments. This is especially a bigger problem in mobile devices.

So why not give them a short cut. To do this, simply add a "Go to Top" arrow button to your blog, which keeps on sliding as the readers read the post, and whenever clicked by him/her, it will escort them to the top region of the blog smoothly [See it in action here: Demo].

Step #1
Log in to Blogger

Step #2
Go to Template section and click on Edit HTML
Now, find this code in your template

</head>

And immediately above it, add this code:

<!-- scroll to top smooth jquery starts -->
<style type='text/css'>
.scrollToTop{
width:100px;
height:100px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
bottom:20px;
right:15px;
display:none;
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRq8JqN0WGHrWGhOYlUYjOSn8q1K1QFtXxz0ruNpgFwyDJy9s4k2T-tT7RwdL9Y9XoNsGjYjXUmuK6ddEsk_LLCkOhij1VOX7pGE82j-vcxKeaB0GrAXtaim69oRtagrCUjtQ5GU3P1qw/s1600/scroll_back-to-top_1.png&#39;) no-repeat 0px 20px;
z-index: 150;
}
.scrollToTop:hover{
text-decoration:none;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){

//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() &gt; 100) {
$(&#39;.scrollToTop&#39;).fadeIn();
} else {
$(&#39;.scrollToTop&#39;).fadeOut();
}
});

//Click event to scroll to top
$(&#39;.scrollToTop&#39;).click(function(){
$(&#39;html, body&#39;).animate({scrollTop : 0},800);
return false;
});

});
</script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<!-- scroll to top smooth jquery stops -->

Add the code highlighted in RED, only if you DO NOT already have a jQuery library in your template.

Step #3
Finally, Go to Layout and click on Add a Gadget (anywhere in the template) and select HTML/JavaScript type. And add this code in to it:

<a href="#" class="scrollToTop"></a>

You can use other images too, by replacing the blue part of the code in step #2. Try any of these most commonly used images:

Credits: Paulund

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts