Membuat Scroll Back to Top,Skip to Content dan Bottom Jquery

Udah tidak usah pake basa-basi nih saya akan kasih tutorialnya tentang
 Membuat Scroll Back to Top,Skip to Content dan Bottom Jquery

Ikuti langkah dibawah ini dengan benar.

Pertama

• Login Blogger, Rancangan ,Edit HTML
• Cari kode </head> ,kalo sudah dapat taruh kode di bawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->

<script type='text/javascript'>

$(function(){

$('a[href*=#main], a[href*=#], a[href*=#bottom]').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}, 2000);

return false;

}

}

});
});
</script>

• kalo sudah cari kode </body> ,lalu taruh kode di bawah ini di atas kode </body>

<a href='#' title='go to top' style='position: fixed; right: 0; bottom: 15px; outline: medium none;'>

<img src='http://th613.photobucket.com/albums/tt211/iscanderro/th_up_arrow.png'/>

</a></div>

<div id='gotop'>

Yang di atas untuk back to top.anda bisa memodifikasi gambarnya... atau bisa juga di taruh di atas footer column seperti punya saya. atau terserah anda.

• truss ini untuk scroll skip to content, klik tambah gadget lalu letakkan kode di bawah ini di mana saja, terserah anda. 

<div id='gotop'>

<a href='#main' title='go to content' style='padding:0'>

Skip to Content

</a></div>

Anda bisa memodifikasi kode skip to content di atas, atau anda ingin menambahkan gambar?? anda hanya perlu menambahkan kode "<img src='url image anda'/>" atau mengganti tulisan "Skip to Content", dan anda juga bisa menaruhnya di header blog anda.

• nah ini untuk scroll skip to bottom, cari kode< /body> lalu taruh kode di bawah ini di atas kode </body>

<div id='gotop'>

<a href='#bottom' title='go to bottom' style='position: fixed; right: 25px; bottom: 15px; outline: medium none;'>

<img src='http://i1082.photobucket.com/albums/j379/thescape1/th_up_arrow.png'/>

</a></div>

Jadi nanti struktur HTML nya jadi seperti ini :