Scroll to top button is very useful for bloggers if their have long blogs.To Add "scroll to top" button to your blog ,follow the steps below.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Scroll down to where you see this:
3.Now add below CSS code before ]]></b:skin> tag .
#toTop { 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; } |
4.Now add below code before </body> tag:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> $(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() { |
5.Now save your template and you are done.Look at the picture below.
My blog not properly displayed. bottom of blog page some html code display. why?
/* to top */ #toTop { 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; }