Membuat Back To Top Dengan Smoothscroll jQuery

Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.

[image src: deconstructioncode.blogspot.com]

Kali ini saya ingin share kepada teman-teman semua tentang bagaimana Membuat Back To Top Dengan Smoothscroll jQuery, sedikit berbeda memang dengan cara memuat Back To Top yang biasanya kita jumpai (tanpa edit HTML).

Tapi ini kita harus sedikit mengutak atik templates namun hasilnya bisa saya katakan sedikit lebih baik, karena ini adalah Smoothscroll jQuery, ketika kita klik tulisan Back To Top (silahkan di coba di dalam blog ini) maka dia akan perlahan-lahan naik ke atas dengan smooth (lembut dan santai).

Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".

Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Cari kode berikut: </head> lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Lalu lanjutkan dengan menaruh kode javascript di bawah ini persis di bawah script jQuery tadi:

<script src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/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>

5. Terus cari kode <body> dan gantikan dengan <body id='top'>

6. Lanjutkan dengan mencari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>

#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;}

7. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

8. Jika sudah dikerjakan dengan benar, maka klik Save Templates.

Note:

1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (biar tidak double), lanjutkan saja dengan langkah selanjutnya,
2. Untuk merubah warna, posisi dan tulisan cek di di bagian tulisan yang saya beri warna HIJAU.

Referensi:

- Deconstructioncode [http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html]- David Walsh Blog [http://davidwalsh.name/jquery-top-link]- Riky Rizkiyana [http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html]

Seperti itulah Cara Membuat Back To Top Dengan Smoothscroll jQuery, semoga bisa teman-teman coba di blognya dan bisa bermanfaat. Salam.