Animated Scroll to Top With jQuery Ui

Animated - Pasti kita semua sudah tahu apa itu animated (animasi) yang bisa dibilang akan memperindah tampilan blog kita, namun kali ini kita hanya akan membahas mengenai Cara Membuat Back to Top Dengan Animasi.

Animasi selalu berhubungan dengan jquery-ui karena tanpa jquery-ui maka animasi tidak akan bekerja, seperti halnya motor yang membutuhkan bensin. :P

Dengan jquery pekerjaan akan lebih mudah, mengapa saya bilang begitu???
Ketika kita membuat scroll to top dengan efek bounce, maka kita harus menuliskan script seperti ini.

Perhatikan script dibawah ini:

$('body,html').animate({scrollTop: 0}, 800).animate({scrollTop: 25}, 200).animate({scrollTop: 0}, 150).animate({scrollTop: 10}, 100).animate({scrollTop: 0}, 50);

Bisa kita  lihat bahwa disitu kita harus menuliskan .animate() berulang-ulang hanya untuk menciptakan efek Bounce Saja.
Bandingkan saja ketika kita menggunakan jQuery Ui.

Perhatikan Contoh:

$("html, body").animate({scrollTop: 0}, {duration:1000, easing:"easeOutBounce"});

Perhatikan kode yang saya tandai, kita hanya perlu memasukkan easeOutBounce saja kalau hanya untuk menciptakan efek Bounce. Lebih mudah dan simple bukan??

Tapi tidak mutlak pada efek bounce saja, kita bisa membuat efek sesuai dengan keinginan kita.

Lihat Efek-efeknya: => Easing DEMO

Animated Scroll to Top With jQuery Ui

Untuk membuatnya silahkan Simak Baik-baik. :P

Salin CSS berikut tepat di atas ]]></b:skin> atau </style>

#animated-top {
border: 1px solid #555;
background: #777;
text-align: center;
position: fixed;
bottom: 10px;
left: 10px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 1000px;
padding: 5px;
display: none;
transition: all .3s ease-out;
}
#animated-top:hover {
background:#0a0a0c;
}
#animated-top:before {
content: "";
position: absolute;
bottom: 18px;
right: 14px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 11px 16px 12px;
border-color: transparent transparent #05FFEB transparent;
line-height: 0;
}
#animated-top:after {
content: "";
position: absolute;
bottom: 18px;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 14px 11px;
border-color: transparent transparent #777transparent;
line-height: 0;
transition: all .3s ease-out;
}
#animated-top:hover:after {
border-color:transparent transparent #0a0a0c transparent;
}

Kemudian Temukan code </body> dan pastekan script berikut diatasnya.

<script type='text/javascript'>
//<![CDATA[
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#animated-top').slideDown(200);
        } else {
            $('#animated-top').slideUp(300);
        }
    });
    $('#animated-top').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, {
            duration: 2000,
            easing: "easeOutQuint"
        });
    });
});
//]]>
</script>
  <div id='animated-top'/>
<script src='http://aab-general.googlecode.com/svn/trunk/jquery-ui.js' type='text/javascript'/>

Kostumisasi:

Script yang saya garis bawahi adalah plugin Easing, Harap jangan dihapus atau script tidak akan bekerja.
Dan Script yang saya tandai bisa anda ubah semau anda.

Contoh: duration:2000 adalah kecepatan scroll, bisa anda ganti nilainya sesuai kebutuhan
easing:"easeOutQuint" adalah efek yang akan dijadikan animasi pada scroll to top ini dan ntuk mengubah efeknya silahkan lihat pada demo diatas dan ganti efeknya sesuai selera anda.

Sebenarnya dengan plugin easing kita bisa membuat aneka animasi untuk memperindah tampilan blog kita, tidak hanya untuk membuat tombol scroll saja, contoh seperti ini. => Contact