Back to Top 'Smooth Page Scroll' jQuery

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.2/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. Lalu letakkan Kode CSS berikut, diatas kode ]]></b:skin>

/* Back to Top */
#top-link {display:none;font-weight:bold;font-family:century gothic;font-size:13px;width:auto;background:#111;position:fixed;right:-25px;bottom:130px;padding:5px;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}#top-link:hover {text-shadow:0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red;border:1px solid #fff;}

6. Selanjutnya Masukkan kode HTML berikut diatas </body>

<div id='top-link'><a href='#top' style='color:#fff;' title='Back to Top Page'>Back to Top</a></div>

7. Simpan template. Dan berhasil.

Keterangan:
- Script jquery (yang berwarna biru muda) jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.



Please rate this article: