Cara Membuat Autoscroll Back to Top dengan Jquery

Cara Membuat Autoscroll Back to Top dengan Jquery

Membuat Autoscroll Back to Top dengan Jquery ini sama fungsinya dengan button back to top yang caranya sudah pernah saya posting pada artikel sebelumnya Cara Memasang Buttom Back to Top pada Blog. Tetapi yang membedakan adalah pada buttom back to top sebelumnya button akan tetap muncul walau pun halaman atau page pada posisi di header atau atas. Sedangkan autoscroll Back to Top dengan Jquery ini button-nya tidak akan muncul jika halaman atau page pada posisi header atau di atas.

Singkatnya, autoscroll Back to Top dengan Jquery ini akan muncul jika posisi halaman atau page sudah di scroll ke bawah, sedangkan jika posisi halaman atau page berada di header button-nya tidak akan muncul. Bingung yaa dengan penjelasannya, saya juga bingung mau njelasinnya gimana, hehehe... habisnya dulu pelajaran Bahasa Indonesia-nya jarang masuk sich... Langsung dipraktekkin aja dech kalo gitu. Jika Sobat tertarik ikuti langkahnya berikut ini.
Cara Membuat Autoscroll Back to Top dengan Jquery

Cara Membuat Autoscroll Back to Top dengan Jquery

  • Pertama login dulu ke blogger
  • Kemudian pilih menu Template
  • Setelah itu klik Edit HTML
  • Copy dan paste-kan kode script berikut tepat di atas kode </body>
<a href='#' id='toTop'>Back to Top</a>
  • Kemudian copy dan paste-kan kode script berikut dan letakkan tepat di atas kode ]]></b:skin>
#toTop { width:100px;background:# f5f5f5;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
  • Tambahkan Jquery Library berikut jika pada template Sobat belum memilikinya, dan lewati langkah ini jika sudah ada karena sebuah template hanya membutuhkan satu buah Jquery Library, tidak lebih
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
  • Langkah selanjutnya copy dan paste-kan kode script berikut tepat di atas </head>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});
</script>

<script type='text/javascript'>
$(function() {
$(&quot;#toTop&quot;).scrollToTop();
});
</script>
  • Terakhir simpan template dan lihat hasilnya
Demikian Cara Membuat Autoscroll Back to Top dengan Jquery ini, mudah-mudahan bermanfaat dan dapat berguna untuk Sobat semua yang pemula seperti saya. Happy blogging!

Artikel terkait:

Bagikan: