Monday, September 24, 2012

Add Scroll To Top Button To Your Blogger Blog Using Jquery

Author: Gagan Masoun
Add Scroll To Top Button To Your Blogger Blog Using Jquery
Scroll to top button is must for all blogs.Because your blog reader can easily navigate to top by using that button.I made simple and cool scroll to top button using jquery. I am sure you will like it because it will not take long time to load. This smooth Jquery scrolling button makes your blog more attractive.So let's start how to install it in blogger blog.Just follow given below steps:

Recommend For You: Add Enhanced AddThis Sharing Tool To Your Blog

How to Add Scroll To Top Button To Your Blogger Blogger

Note: Please make your blogger blog backup before make any changes.
  • Go to Blogger Dashboard > Template > Edit HTML
  • Use Ctrl + F to find this code </body>
  • Copy and Paste The Below Code Above </body>
<a href="#" id="backtotop">^ Scroll to Top</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
*Scroll to top
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
  • Now Press Ctrl + F & Find ]]></b:skin>
  • Paste The Below Code Above ]]></b:skin>
#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
  • Save Your Template. You Are Done!
If you need our help ask any time via comment box.Happy blogging stay blessed.

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

7 comments:

  1. Replies
    1. Thanks a lot Sunil for liking our post...5 tips shared by you are really awesome.Keep in touch.

      Gagan Masoun

      Delete
  2. Good post brother. Please update this post by adding some more Scroll to Top Buttons.
    Thanks in advance,
    revealingthestuffs.com
    Sriram's New Blog Post: TOP 4 WEBSITES TO GET YOUR BLOG'S POST IN PDF FILE

    ReplyDelete
    Replies
    1. @Sri, Thanks a lot, yes I will update this post soon with more Scroll to top buttons. :)

      Delete