Scrolling Top and Bottom Buttons using JQuery Blogger

Well providing your readers an easy way to navigate your website is the first step to awesome loyal readership, yes if they are able to navigate your website with ease they would surely love to give a try to other useful articles. Well so we have top and bottom navigating button's, so these can be used to go right to top other slide down to bottom. So these are really useful, so we are going to see how to implement this on blogger blogs.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for </head> tag & paste below JQuery code above it, well if you already have it then leave this step, but if you face any problem then paste this one for sure.

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

3. Now again search for ]]></b:skin> tag & paste below CSS code above it to provide nice styling to the buttons.

   .button_up{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNixDNWF5Q4TVlzguDUeztL7SwRNeaPUzivQ9uA9NAkfO_jtUSEK_2AuUWNzj6v3KD1naLOItXjEClP8YHwoCK8Cg0uwv78x3Rin2OmDYgs0MFQQXeQoekGQACcVnbrSUSkf0rVm_UQTI/s16/arrow_up.png) no-repeat top left;background-color:#FFF;background-position:50% 50%;border:1px solid #CCC;border-radius:3px 3px 3px 3px;bottom:280px;cursor:pointer;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);height:20px;opacity:0.7;padding:7px;position:fixed;right:5px;white-space:nowrap;width:20px}.button_down{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vCwBFjMi2uBO98oHAhysYFZv9t5F_mEKhveBQ6N3vBY3ufgGWl2sLBiMdVtTJdb1uxLaoRyMChaAcXH8OHtE7NcilT-ujigtPSBe7S3wyAxZoyRV2IXfcgsidfbxh-N4au3gkKbZAVY/s16/arrow_down.png) no-repeat top left;background-color:#FFF;background-position:50% 50%;border:1px solid #CCC;border-radius:3px 3px 3px 3px;bottom:242px;cursor:pointer;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);height:20px;opacity:0.7;padding:7px;position:fixed;right:5px;white-space:nowrap;width:20px}

4. Now once again search for </body> tag & paste below HTML code above it to get this widget working.

   <div class='button_up' id='button_up'/><div class='button_down' id='button_down'/><script>//<![CDATA[
   (function(){var e=jQuery.event.special,t="D"+ +(new Date),n="D"+(+(new Date)+1);e.scrollstart={setup:function(){var n,r=function(t){var r=this,i=arguments;if(n){clearTimeout(n)}else{t.type="scrollstart";jQuery.event.handle.apply(r,i)}n=setTimeout(function(){n=null},e.scrollstop.latency)};jQuery(this).bind("scroll",r).data(t,r)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(t))}};e.scrollstop={latency:300,setup:function(){var t,r=function(n){var r=this,i=arguments;if(t){clearTimeout(t)}t=setTimeout(function(){t=null;n.type="scrollstop";jQuery.event.handle.apply(r,i)},e.scrollstop.latency)};jQuery(this).bind("scroll",r).data(n,r)},teardown:function(){jQuery(this).unbind("scroll",jQuery(this).data(n))}}})();$(function(){var e=$("body");$("#button_up").fadeIn("slow");$("#button_down").fadeIn("slow");$(window).bind("scrollstart",function(){$("#button_up,#button_down").stop().animate({opacity:"0.2"})});$(window).bind("scrollstop",function(){$("#button_up,#button_down").stop().animate({opacity:"1"})});$("#button_down").click(function(t){$("html, body").animate({scrollTop:e.height()},800)});$("#button_up").click(function(e){$("html, body").animate({scrollTop:"0px"},800)})})//]]></script>

5. Now we are done pasting all codes, just hit Save Template & refresh your blog to see these awesome buttons appearing.

So guys now your gadget is up and running, well I would love to thank helplogger for posting this awesome and useful tutorial. Well you have any problem do comment :)