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.

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

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://3.bp.blogspot.com/-_N2UZkzLr4E/V-RsUPPFT_I/AAAAAAAAIaU/habym7tOWpwF4AcypCR8FME2QeaRjeyTACLcB/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:

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

Credits: Paulund

Leave a Reply

61 Comments on "Add Floating – jQuery Based Smooth – Scroll or Back To Top Button In Blogger Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
snam
Guest

Great widget! Thanks for sharing!

View Comment
snam
Guest

Hey, my button is gone and it was there yesterday. What is wrong? My blog where the button is missing: http://howtoearnmoneyonline-snam.blogspot.com/

View Comment
Divya Sai
Guest

Its not a coding problem, actually, the image is hosted at Gigaimage, and i think there’s some server problem at Gigaimage, so the images are not loading from them……you can host the image anywhere else and use the same code !

View Comment
Anonymous
Guest
இமயவரம்பன்
Guest
M.GUSOON
Guest

thankyou for this page

View Comment
Blogger Templates
Guest

Welcome guys !

Sai

View Comment
Mohammad Mustafa Ahmedzai
Guest

I am in love with your blog. You just rocked me with tonnes of tips and tricks. I just added you to my follow list.
This tricked worked for me. But I want a Back to Top button just like yours. Tell me how to get it

Regards,
Learn how to increase your Computer Speed

View Comment
Mohammad Mustafa Ahmedzai
Guest

haha I got one just like yours by stealing the code from your source file. Credits goes to you.
To see the result visit,
Learn how to increase your computer speed

Regards,
MOHD___

View Comment
Peter
Guest

Hi! I would like to thank you for all your help, not just here but throughout your site.

One question, if I wanted to add one to take me to the bottom of the page, how would I change the code?

Take Care,
Peter

View Comment
Divya Sai
Guest

Hi Peter,

thanks for your kind comment…
to link the bottom of the page simply make this change in the above code:

change
href=”#”

to
href=”#footer”

that’s it !

Regards
Sai

View Comment
Peter
Guest

Hi Sai! That was quick. You’re certainly on the ball with your answers! You are to be commended again for your great work! I’ll amend the one I’m working on.

Take Care,
Peter

View Comment
bloggerstop.net
Guest
selvaraj
Guest

Hi “Brilliant”.

You are doing a wonderful job here.

Thanks,
Selvaraj

View Comment
Divya Sai
Guest

Hello Selvaraj !

Thanks for the encouraging comment…
You are always welcome here !

Regards
Sai

View Comment
AWoWAddict
Guest

I have a question. How do you make your back to top button grow on mouse over?

View Comment
Divya Sai
Guest

Hi A WoW Addict,

ACtually that’s a simple combination of 2 images of different sizes, which change themselves on mouse hover,
You’ll better understand that through this post:
http://bloggerstop.net/2009/01/create-html-button-for-your-blog.html

View Comment
AWoWAddict
Guest

Thanks! The button is working perfectly.

View Comment
pinaysexvideos
Guest

This tutorial is very useful. But what codes do I need to add if I also want a “Go To Bottom” button? A “Go To Bottom” on the top-right side and a “Go To Top” on the bottom-right side of my blog’s page. I’m gonna have to follow your blog… :))

View Comment
Divya Sai
Guest

Hi…

In the code above, change this:
bottom:5px;right:5pxto something like:
top:25px;right:5pxRegards
Sai

View Comment
wpDiscuz