0 Membuat Tombol Back To Top Menggunakan Jquery 1.4.3

Tombol Back to Top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. Tombol Back to Top nantinya akan terlihat di pojok kanan bawah apabila pengunjung mengarahkan scrollnya ke halaman bawah pada Blog Anda. Untuk yang ingin membuat tombol back to top atau tombol kembali ke atas menggunakan Jquery versi 1.4.3, silahkan ikuti langkah berikut ini.

hasilnya akan seperti gambar ini

1. Login ke Blogger > Edit HTML
2. Cari kode ]]></b:skin>
3. Letakkan kode berikut ini di atas kode ]]></b:skin>

#toTop {
    width:70px;
        border:1px solid #ccc;
        background:#f7f7f7;
        opacity:0.8;
        text-align:center;
        padding:5px;
        position:fixed;
        bottom:10px;
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}

4. Kemudian cari kode penutup </head> lalu pasang kode berikut di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();   
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });   
});
</script>

5. Setelah itu cari lagi kode </body> dan pasang kode berikut di atas </body>

<div id="toTop">^ Back to Top</div>

6. Save template dan lihat hasilnya.

Artikel Terkait :