Membuat back to top dengan jquery

Hari ini saya sudah posting 4 new post sekaligus. salah satunya ini juga. saya juga sudah lelah ngetik, jadi langsung saja Step By Step
1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas 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(){
    $(&#39;a[href*=#top]&#39;).click(function() {
    if (location.pathname.replace(/^//,&#39;&#39;) == this.pathname.replace(/^//,&#39;&#39;)
    &amp;&amp; location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $(&#39;html,body&#39;).animate({scrollTop: targetOffset}, 1000);
    return false;
    }
    }
    });
    });
    </script>



5. Kemudian Ganti kode <body> dengan kode <body id='top'>

6. letakan kode di bawah ini, di atas kode </body>

    <div id='gotop'>
    <a href='#top' title='Go to Top'>
    <img src='http://2.bp.blogspot.com/_fqjCZ2SxflI/TBliTFM2GOI/AAAAAAAAAKI/xgAIzEcW4MM/S768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
    </a>
    </div>


7. Selesai, dan silahkan menikmati back to top jquery

Yang berwarna biru bisa diganti dengan gambar milik anda sendiri

5 komentar:

Asrizal Wahdan Wilsa, 3 August 2010 at 06:28 | [Reply]

tipsnya mudah dan bermanfaat sob, dicoba neyh

Dimas Abi Galoga, 4 August 2010 at 02:19 | [Reply]

@Asrizal Wahdan Wilsaoke makasih commentnya

Unknown, 20 September 2010 at 09:13 | [Reply]

Wah,ganti template...mantap...
gimana caranya agar icon top tersebut tetap berada di pojok bawah?nampak terus walapun discroll halamannya.

Dimas Abi Galoga, 21 September 2010 at 03:03 | [Reply]

@Suparyanto jika menggunakan efek jquery memang sepeti itu, jdi saat posisi berada benar2 di atas back to top tidak akan ada, namu ketika bergeser ke bawah sedikit saja maka back to top akan muncul. itu yg saya tau

I'm → Botzzz, 14 November 2010 at 05:03 | [Reply]

nice post mas.....

salam knl ya.......

jika berkenan silahkan mmapir balik

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home