Cara Membuat Back To Top jQuery topLink Plugin Ala David Walsh

Huh... kembali lagi dengan tutorial baru hhe... dan kali ini saya mau ngajak anda untuk membuat "Back To Top" Dengan memanfaatkan topLink Plugin yang dibuat oleh David Walsh, seorang Consultant jQuery yang blognya bener-bener bikin mata gak gerak haha...

Dan Contoh penggunaan Back To Top jQuery topLink Plugin ini dapat anda lihat di blog ini, cuma karena yang dimanfaatkan disini bukan Image seperti Back To Top biasa, melainkan jQuery So klo koneksi anda agak lambat tolong bersabar hingga Loading blog ini selesai hhe... dan baru perhatikan bagian sebelah kanan... atau klo males nunggin juga, silahkan perhatikan gambar diatas. Hasilnya gak beda jauh koQ sama Back To Top dengan memanfaatkan Image, cuma bedanya ini lebih smooth karena udah diatur speednya dan yang lebih penting Back To Top ini gak terpengaruh sama Server Image Hosting andai Image Hosting yang anda gunakan lagi Down hhe...

Sebelum lanjut ke Tutorial Back To Top jQuery topLink Plugin Ala David Walsh, saya akan kasih Tutorial Back To Top dengan penggunaan Image terlebih dahulu agar anda tau letak perbedaannya dan silahkan juga klo anda lebih memilih yang image dengan alasan tertentu hhe...

Tutorial Back To Top With Image (Classic):

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

</body>

Jika Sudah anda bisa langsung menempatkan kode dibawah ini tepat sebelum kode </body> tadi.

<a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="http://i785.photobucket.com/albums/yy131/djnand/totopbutton.gif"/></a>

Dan silahkan Save template anda dan lihat hasilnya, dan seharusnya anda akan menemukan Button seperti ini :

Dibagian kiri bawah page blog anda yang jika di Klik akan langsung mengarah ke bagian atas. Image tersebut dapat anda ganti dengan image Back To Top lain yang anda mau, dengan mengganti Url Image yang saya beri warna merah.

Dan kini kita beralih ke inti postingan kita kali ini:

Tutorial Back To Top jQuery topLink Plugin:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

</head>

Jika sudah, masukkan Javascript dibawah ini tepat sebelum atau diatas kode tersebut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script src='http://postrecent.googlecode.com/files/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

Kemudian, silahkan beralih dan cari kode <body>, klo udah ketemu ganti kode tersebut dengan kode <body id='top'>. Tenang aja gak akan terjadi apa-apa dengan template anda, tambahan properti itu hanya saya gunakan untuk pemanggilan Variabel Top Link ini nanti.

Jika Sudah, Beralihlah lagi dan Cari kode ]]></b:skin>, Dan silahkan tempatkan Kode CSS dibawah ini tepat sebelum atau diatas kode tersebut:

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

Oiya jika anda kurang suka dengan warna dan lekukan default dari CSS diatas, anda bisa mengubah warnanya dengan mengganti kode warna Hexa. dan menambah lekukannya dengan menambahkan angka di border radiusnya.

Eitz, tunggu dulu tutorial ini belum rampung, terakhir silahkan cari kode </body>, dan letakkan kode dibawah ini tepat diatasnya atau sebelum kode tersebut: