Cara Membuat Back To Top di Website

Membuat tombol Back To Top di webite dengan jquery, kali ini akan menjadi pembahasan ebsof...
Untuk Demo Membat BACK TO TOP  Anda bisa melihat di Sini

adapun cara membuat Back to Top di website dengan menggunakan jquery yaitu :

1. Download library Jquery "jQuery library and jquery.scrollToTop.min.js " untuk kita panggil nantinya di website kita dengan menggunakan script di bawah ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.scrollToTop.min.js"></script>

2. Tambahkan kode html berikut di  bagian mana saja dari halaman website kita

<a href="#top" id="toTop"></a>

3. Panggil plugin jquery dengan cara menambahkan code sbb  tepat di atas tag </head>:

<script type="text/javascript">
    $(function() {
         $("#toTop").scrollToTop(1000);
    });
</script>

dan terakhir.. untuk membuat tampilannya lebih indah kita tambahkan script css sbb :

#toTop {
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
    width: 64px;
    height: 64px;
    background-image: url('../image/up.png');
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
#toTop:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

Untuk Demo Membat BACK TO TOP  Anda bisa melihat di Sini

Jika anda ingin Source code nya untuk website Dinamis HTML,PHP,MYSQL... silahkan Follow terlebih dahulu y...

Google+ Followers