Jumat, 18 Maret 2011

Back to Top dengan jQuery 2

smoothscroll - back to top
Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.

Back to top 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 bacaan "back to top".

Tahapan Pembuatan Back to Top - 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'/>
<!-- 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>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti : <body id='top'>
5. Lalu 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. Lalu Masukkan kode HTML berikut diatas </body>


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

7. Simpan template. Dan berhasil.

Keterangan:
- 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.
- Script back to top ini dikembangkan dari smooth page scroll.

Jangan Lp Untuk Lihat Contoh Back to Top Lainnya :

1. Back to Top dengan jQuery
2. Back To Top Atas/Bawah Transparent

0 komentar:

Posting Komentar