August 13, 2011

How To Create "Scroll to Top" Button to Blogger

How To Create "Scroll to Top" Button to Blogger

1.Log in to your dashboard--> Design- -> Edit HTML

2.Scroll down to where you see this:


3.Now add below CSS code before ]]></b:skin> tag

/* 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; }

4.Now add below code  before  </body>  tag:

<a href="#" id="toTop">^ Scroll to Top</a>

<script src='' type='text/javascript'></script>
<script type='text/javascript'>
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (
* Bring to you by Zen from
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go
* Do not delete these infomation
* Version: 1.0, 12/03/2009

$(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.

No comments:

Post a Comment