How To Add Scroll on Top Button | Blogger JQuery Tips

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
3.Copy below code and paste it just before the </head> tag .

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

<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>
<!-- end scrolltop -->



4.Now scroll down where you see <body> tag .


5.Replace <body> tag with <body id='top'> .


6.Now again scroll down where you see </body> tag .


7.Copy below code and paste it just before </body> tag:

<div id='goingtop'>
<a href='#top' title='Go Top'><img src='http://1.bp.blogspot.com/_4HKUHirY_2U/Sujr21YfikI/AAAAAAAAAGM/mPXYFXAepV4/top.png' style='right:20px; bottom:20px; position: fixed;'/></a></div>



Now you can change your background image replacing above red colored code with your image URL. For getting image URL you can host free image here


8.Click on save template and you are done.

No Comment Yet Post a Comment

Leave a Comment