Pages

Sabtu, 14 Agustus 2010

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhviFARe4ETw5EpaL-B_dFlEoK4rhFHTat1C7Si7FcQgDEZUBELYjWs1C9K8YqvIHHDr6Wo48D45-w8nc7Rv8O9Nh5kWnVWI26Mcex3yZVBdmAqKFP1ZAa1UjEaFZAkei7ExU01nFlIMAXZ/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>

    </a>


    </div>


Tidak ada komentar:

Posting Komentar

 

Sample text

Sample Text

Sample Text