Free Blog Themes, Blog Tutorials, Blog Templates, Blogger Tips, Blog Resources » scroll http://www.blogbunker.com Free blogger templates, blogger tutorials, blogger tips, blogger guildes, blogger widgets, free wordpress plugins, free wordpress theme, blogger resources Sun, 22 Jan 2012 06:20:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How To Add Scroll on Top Button | Blogger JQuery Tips http://www.blogbunker.com/blogger-tutorials/how-to-add-scroll-on-top-button-blogger-jquery-tips/ http://www.blogbunker.com/blogger-tutorials/how-to-add-scroll-on-top-button-blogger-jquery-tips/#comments Thu, 13 May 2010 21:56:46 +0000 admin http://www.blogbunker.com/blogger-tutorials/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 || [...]]]> 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.


]]> http://www.blogbunker.com/blogger-tutorials/how-to-add-scroll-on-top-button-blogger-jquery-tips/feed/ 0