Membuat Tombol Smooth Back To Top dengan jQuery

Saya akan sedikit mengulas tentang jQuery yang diaplikasikan kedalam tombol Back To Top. Tombol tersebut berfungsi sebagai navigasi apabila kita berada pada page paling bawah, kita bisa menggunakannya untuk kembali lagi pada page paling atas.
Dewa Teknik
Smooth Back to Top

Hari ini saya mendapatkan ilmu baru dari Blog Kang Ismet. Saya akan sedikit mengulas tentang jQuery yang diaplikasikan kedalam tombol Back To Top. Tombol tersebut berfungsi sebagai navigasi apabila kita berada pada page paling bawah, kita bisa menggunakannya untuk kembali lagi pada page paling atas. Sebagian besar para blogger yang memiliki artikel yang sangat panjang akan memasang tombol ini agar memudahkan para pembaca dapat kembali lagi ke menu atas. Disini saya akan bicara tentang tombol Back To Top dengan efek pergeseran hampir halus atau smooth. Pada dasarnya membuat tombol ini tidaklah susah, hanya dengan menambahkan link # akan tetap bekerja normal, namun beberapa blogger mengeluh akibat tombol yang tidak ada efek sama sekali. Oke langsung saja saya akan bagi trik manipulasi agar tombol tersebut menjadi smooth. Ada 2 pilihan bagi sobat, yaitu dengan efek fade-in fade-out  dan tanpa fade-in fade-out.

Style 1 (Tanpa Fade-In Fade-Out)

Yang dimaksud disini adalah efek ketika pertama membuka blog, tombol akan keluar secara langsung tanpa adanya efek masuk dan keluar terlebih dahulu. Untuk membuatnya silahkan mengikuti tutorial berikut:
  1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
  2. Pada menu Dashboard, Pilih Layout --> Add Widget.
  3. Kemudian pilih Widget HTML/Javascript
  4. Letakkan kode berikut ini kedalam teks editor widget
    5.  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery(&apos;html, body&apos;).animate({scrollTop:0}, &apos;slow&apos;);' title="Kembali ke atas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tWC4trNMWYF6bebvOPkXQpws33ecGBR6VnJjNV36o0YXA2ZFuNoS8msXoppBcltiQHz-x5TVLwS7Fv7A0Pmsi4P30Kdca0K0D1soXZXZVWyU3JP7-D1UQROw99UnNlbiTB0kd3j9myA/s400/Back-to-top.png" /></a>
  5. Simpan widget dan lihat hasilnya.

Style 2 (Dengan Fade-In Fade-Out)

Apabila efek ini diaktifkan, maka tombol akan mempunyai efek. Pada saat pertama membuka blog, tombol tidak akan keluar. Tetapi pada saat scroll ke bawah, tombol akan muncul di posisi pojok kanan bawah. Untuk membuatnya silahkan mengikuti tutorial berikut:
  1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
  2. Pada menu Dashboard, Pilih Template --> Edit HTML.
  3. Letakkan kode berikut ini diatas kode </head>
    4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
  4. Simpan template. Kemudian tambahkan widget HTML seperti cara Style 1.
  5. Letakkan kode berikut ini kedalam teks editor widget
    6.  <style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3VMmD_jrGHnKjdu1zKNZwoCkMRB9VKra1RbwI8lhjkkVyHcpZK8PmHab9nQlJmSK6m6aRW1hMq365wt2twkb2zps6W6N9uA4ggI8Mb9DD7IMqtZFkynNi3HWUro00ft9ljHC2I-8vIFg/s1600/arrow-up_basic_blue.png'/></div>

  6. Simpan
Untuk melihat demo silahkan klik ikon demo dibawah ini:

Terima kasih sudah berkunjung :)
Dewa Teknik