Membuat Back To Top Dengan Jquery

Posted by

Hiii friend kali ini kita akan membahas Blog tutorial tentang membuat back to top dengan jquery merupakan sarana penting dalam suatu blog. Dengan back to top, memudahkan para pengunjung untuk memindahkan kursor ke bagian paling atas blog pada saat
pengunjung berada pada dasar halaman. Misalnya,anda menghampiri/mengunjungi blog ini dan membaca sebuah artikel di blog ini sampai paling bawah. Karena anda ini males atau aras-arasen  untuk menggeser scroll sampai ke atas lagi, anda ini bisa mengeklik sebuah tombol atau link yang memudahkan anda ini untuk kembali ke bagian paling atas blog(inggrisnya back to top). Nah, tombol inilah yang dinamakan tombol “Back to Top“. Belum jelas juga apa yang dimaksud “Back to Top?” Sekarang caba geser/scroll cursor sampai ke bawah sedikit. Disana kalian menemuai sebuah kata “Back to Top“, nah coba kalian klik tombol back to top ini. Apa yang terjadi? kursor bergerak ke atas kan? nah, itulah yg namanya “Back to Top“. Kalau masih belum mudeng juga, waliken klambimu!. Bentuk-bentuk, kreasi, model, syle back to top ini beragam jenisnya. Mulai yang standar, sampai yang menggunakan jQuery. Back to top yang standar mah udah biasa...,. Tapi yang jQuery kelihatannya asek nih. Back to Top yang menggunakan jQuery terlihat mempesona dan kelihatan elegan dan dinamis serta lebih cool, tidak klasik ataupun standar. Adapun perbedaan Back to Top standar dan Back to Top yang menggunakan jQuery mode : on. Pertama Back to Top yang standar, gerak keatasnya sangat cepat bahkan tidak terlihat gerkanya, ujug2 langsung neng nduwur. Tp kalau Back to Top yang menggunakan jQuery, itu geraknya indah. Artinya, berbeda dengan Back to Top standar, geraknya itu pelan-pelan dan kalu dilihat itu indah dan sekalilagi.,., cool.,.,. Nah tentunya kalian ingin memasang Back to Top menggunakan jQuery ini? Meskipun kali ini saya akan memberikan tutorial untuk pengguna Blogger, pengguna WPjuga bisa menggunakan tutorial ini dan tidak usah khawatir karena kalian juga bisa mengkopi scriptnya dan meletakanya di blog kalian. Langsung aja ke cara nya memberi back to top dengan jquery!

 1. Login ke blogger » layout / tata letak » edit HTML
 2. Masukan script jquery berikut diatas </head>

          <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
3. Masukan juga kode javascript berikut dibawah script jQuery tadi:

 <!-- Back To Top -->
<script src='http://riky-rizkiyana.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() &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>
<!-- End Back To Top -->

4 . Cari kode <body> ganti dengan kode <body id='top'>
5. Masukan CSS dibawah 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;}
6. Masukkan kode HTML berikut sebelum    </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
 7. Selesai Dan simpan template.,.,
Catatan :
- Script jquery jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- 'id=top' atau '#top-link' anda dapat rubah, itu merupakan kunci perintah dari effect.
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
  Demikian kode-kode  berdasarkan dari sumber yang ada.


Carel
FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




Demo Blog NJW V2 Updated at: 11:08 AM

26 Komentar:

  1. Dengan jquery ini pengunjung dengan mudah meluncur ke header hanya dengan satu klik

    Salam ukhuwah

    ReplyDelete
  2. Keren sob
    ambil dr magazineforum yah

    ReplyDelete
  3. Balasan komen @ ariel
    Oke riel,.,.

    ReplyDelete
  4. @ all,, silahkan di coba juga lho tutorialnya...

    ReplyDelete
  5. @ ArDa

    Yo Yo da.,., ngono wae mureng2 ra karuan.,.,
    sing penting wis ko bales.,,

    ReplyDelete
  6. Info yang inovatif abis bro...boleh dicoba nih..

    ReplyDelete
  7. Mantafft Kang... kebetulan Blog  aq blom ada Back to TOP,, mw aq coba ah...

    ReplyDelete
  8. nice post bang.....

    salam knl ya.....

    jika berkenan silahkan mampir balik.....

    ReplyDelete
  9. Coba ikutan otak-atik HTML. semoga aja tidak kacau.

    ReplyDelete

SUARAKAN SUARAMU