Back To Top Di Blog Dengan Jquery

Salam sobat semua, kita jumpa lage di artikel sederhana saya. Kali ini kita akan belajar membuat “back to top” di halaman blog kita. Back to top adalah sebuah icon untuk memudahkan kita mengembalikan halaman blog yang sudah berada di halaman bawah agar kembali ke atas tanpa harus mlakukan scrol ke atas. Icon back to top ini berbeda dengan icon back to top yang tanpa menggunakan jquery atau back to top lainnya. Jika icon back to top lainnya akan tetap nampak walaupun halaman blog kita masih di halaman atas, sedangkan back to top ini akan nampak jika halaman blog sudah di scrol ke bawah. Mau tau akan seperti apa jadinya??? Mari kita coba bersama-sama.

Berikut beberapa tahapan untuk membuat tombol back to top menggunakan jquery.

1. Seperti biasa sobat, silahkan masuk ke blog sobat.

2. Pilih Rancangan atau Design

3. Kemudian pilih “EDIT HTML” (jangan lupa centang expand template widget)

4. Copy kode berikut sebelum 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}

NB:

>> background:#000; >> Latar belakang/background berwarna hitam

>> color:#fff; >> tulisan back to top berwarna putih

>> right:-20px; bottom:150px; >> posisi berada dibawah sebelah kanan

5. Kemudian letakkan kode berikut diatas kode </head>

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

<script src='http://z33s.googlecode.com/files/kaluhur.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() &gt;= settings.min)

{

el.fadeIn(settings.fadeSpeed);

}

else

{

el.fadeOut(settings.fadeSpeed);

}

});

});

};

$(document).ready(function() {

$(&#39;#top-link&#39;).topLink({

min: 300,

fadeSpeed: 500

});

$(&#39;#top-link&#39;).click(function(e) {

e.preventDefault();

$.scrollTo(0,300);

});

});

</script>

6. Selanjutnya adalah pemanggilan dan pembuatan tombol back to topnya. Silahkan sobat letakkan kode berikut tepat diatas kode </body>

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

NB :

>>  Jika ketika tombol back to top yang sobat buat tidak berfungsi dengan baik, atau dengan kata lain halaman page kita tidak mau kembali ke atas silahkan di coba untuk mengganti script #top dengan # sehingga hasilnya seperti ini :

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

7. Kemudian jika sudah yakin benar, simpan template sobat.

Itu tadi langkah-langkah untuk membuat tombol back to top. Semoga berhasil sobat, selamat mencoba. Moga manfaat ya...@_*