Facebox jquery.mw

Back to Top dengan Smoothscroll - jQuery

~ ~
Sekarang ... saya coba share cara membuat 'bac to top' yang kalo diklik gag asal loncat ajah ke atas .. tapi dengan cara semut... eh salah .. smooth.. dengan menggunakan fasilitas javascript jQuery dan smoothscroll .

hasil 'back to top' dengan jQuery ini temen temen bisa liat d blog ku.. d pojok kiri bawah . langsung ajah cara buatnya ..

1. Buka Edit HTML

2. Masukan anu kamu . eh script jquery berikut d atas </head>


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


3.Masukan juga kode javascript ini di bawah kode jquery tadi .

<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. Cari kode <body> dan ubah menjadi <body id='top'>

5. Masukan kode HTML berikut sebelum kode </body>


<div id='goingtop'>
<a href='#top' title='Top'><img src="http://i29.tinypic.com/1znu3vq.png" style="right:20px; bottom:20px; position: fixed;"/></a></div>
NB :
-id=top' atau '#top' anda dapat rubah, itu merupakan kunci perintah dari effect.
-temen temen bisa merubah gambar sesuai selera . kalo gambar yg d atas itu gambar blog saya .  silahkan kalo mao dpake .. hehehe ..

6. tungguin ampe 1 jam.. trus klik save template.. hahahaha ..

sekian dulu dari saya kali ini... semoga bermanfaat...

4 komentar:

Posting Komentar