kabayankababayan

Membuat Tombol Back to Top di Blogger

Floating "Back to Top" button

Sebenarnya saya jarang membuat artikel yang panjang, jadi sebelumnya tidak pernah berminat menggunakan tombol melayang untuk "Back to top". Biasanya sih cukup dengan membuat sebuah tautan menuju "#" di dasar halaman blog.
Sayangnya, tautan di dasar laman blog tentu saja hanya bisa diakses ketika si pembaca telah mencapai dasar halaman blog. Jika ternyata ketika di tengah artikel dia ingin kembali ke atas halaman, tidak ada cara baginya selain menggulung sampai atas. That's a bad user experience.

User experience adalah yang utama, dan navigasi halaman blog sangat berperan di dalamnya. Jadi walaupun kita jarang berpanjang lebar dalam menulis artikel, namun sebuah alat yang memudahkan pembaca mengakses navigasi blog sangatlah penting. Alat ini umumnya berupa sebuah tombol melayang (floating button) untuk mengantar pembaca kembali ke bagian atas halaman di mana navigasi blog umumnya diletakkan.

Baiklah, dalam artikel kali ini saya akan menjabarkan bagaimana membuat floating back to top button. Bukan hanya satu, melainkan dua jenis sekaligus. Yang satu menggunakan javascript dan CSS, dan satu lagi hanya menggunakan CSS. Tentu dengan kelebihan dan kekurangan masing-masing yang nanti juga akan saya jelaskan. Mari...

Tombol "Back to Top" menggunakan javascript dan CSS

Tombol jenis pertama ini tidak tampak pada bagian paling atas halaman, dan hanya akan muncul setelah pembaca menggeser sekian bagian halaman ke bawah.

  • Login ke Blogger
  • Pada menu di sebelah kiri, klik THEME
  • Di sebelah kanan, di bawah bagian "Live on Blog", klik Edit HTML dan salin skrip berikut:
    • Tambahkan CSS berikut di bagian <head>:
      .back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 7px;
  z-index: 100;
}
    • Tambahkan skrip berikut di bagian bawah tepat di atas </body>:
      <a class='back-to-top' href='#'>
  <svg height='60' viewbox='0 0 1792 1792' width='60' xmlns='http://www.w3.org/2000/svg'>
    <path d='M1293 1139l102-102q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l102 102q19 19 45 19t45-19l307-307 307 307q19 19 45 19t45-19zm371-243q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z' fill='red'>  
      <title>
        Back to Top
      </title>
    </path>
  </svg>
</a>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script>
  jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
      } else {
        jQuery('.back-to-top').fadeOut(duration);
      }
    });
    jQuery('.back-to-top').click(function(event) {
      event.preventDefault();
      jQuery('html, body').animate({scrollTop: 0}, duration);
      return false;
    })
  });
</script>

      offset adalah jarak (dalam pixel) dari puncak halaman ke bagian yang telah digulung (scrolled) oleh pembaca. duration adalah seberapa lama kita menginginkan efek gulung untuk tampil.

  • Klik Save theme

Cara kerja skripnya sederhana saja; ketika pembaca membuka laman, tombolnya tidak akan tampak. Setelah pembaca menggulung sebanyak offset ke bawah, tombol pun akan muncul di pojok kanan bawah dengan durasi efek fade in dan fade out selama duration detik.
Tombolnya sendiri berupa embedded svg. Ukurannya bisa diatur dengan mengubah nilai height dan width yang asalinya 60 pixel.
Warna tombol dapat diatur pada bagian fill dalam embedded svg.

Tombol "Back to Top" dengan menggunakan javascript dan CSS ini lumayan menarik. Namun ia memiliki dua kelemahan yang membuat saya enggan menggunakannya:

  1. Karena bergantung javascript, efek tidak akan jalan ketika pembaca mematikan javascript di perambannya.
  2. Tidak bisa menggunakan <async> atau <defer> untuk memuat skrip jquery.min.js.
    Well, sebenarnya masih bisa menggunakan <async> atau <defer> asal baris <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> dipindahkan ke bagian <head>. Bagaimanapun, skrip akan menjadi blocking karena tidak bisa dimuat secara asyncronous.

Terutama karena alasan nomor 2 itulah akhirnya saya lebih memilih tombol "Back to Top" statis tanpa animasi.

Tombol "Back to Top" menggunakan CSS

Ada dua jenis tombol "back-to-top" yang akan saya contohkan di sini; (1) tombol yang samar namun menjadi jelas ketika diklik, dan (2) tombol yang warnanya berlawanan dengan warna sekelilingnya.

Tombol semi-transparent

Tombol ini akan selalu tampak di pojok kanan bawah halaman. Tidak akan terlalu mengganggu karena kita membuatnya tembus pandang sehingga teks artikel masih tetap tampak.

  • Login ke Blogger
  • Pada menu di sebelah kiri, klik THEME
  • Di sebelah kanan, di bawah bagian "Live on Blog", klik Edit HTML dan salin skrip berikut:

    • Tambahkan CSS berikut di bagian <head>:

      #tothetopbtn {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 7px;
  z-index: 100;
  fill-opacity: .36;
  transition: fill-opacity .3s ease-out;
}
#tothetopbtn:hover {
  fill-opacity: 1;
}

    • Tambahkan skrip berikut di bagian bawah tepat di atas </body>:

      <a id='tothetopbtn' href='#'>
  <svg height='60' viewbox='0 0 1792 1792' width='60' xmlns='http://www.w3.org/2000/svg'>
    <path d='M1293 1139l102-102q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l102 102q19 19 45 19t45-19l307-307 307 307q19 19 45 19t45-19zm371-243q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z' fill='red'>  
      <title>
        Back to Top
      </title>
    </path>
  </svg>
</a>
  • Klik Save theme

Ketika pembaca membuka laman, dia akan langsung disuguhi sebuah tombol "Back to Top" di pojok kanan bawah. Tombol ini akan selalu tampak. Karenanya, agar tidak mengganggu kenyamanan membaca, kita buat tombol ini selalu tembus pandang kecuali ketika pembaca melayangkan penunjuk tetikus (mouse pointer) ke atasnya.

Tingkat kesamaran (opacity) tombol ini dapat diatur pada CSS fill-opacity yang asalinya 0,36 atau 36%. Laju perubahan opacity dapat diubah pada CSS transition yang asalinya adalah 0,3 detik.
Sifat-sifat tombol seperti tinggi, lebar dan warna dapat diatur pada bagian embedded svg, dengan mengubah nilai height, width yang asalinya 60 pixel dan fill yang asalinya berwarna red atau merah.

Tombol berwarna beda dengan sekelilingnya

Ikuti langkah menyunting tema seperti membuat tombol semi-transparent di atas, atau sesuaikan dengan platform blog yang digunakan. Bedanya, kita gunakan CSS berikut di bagian <head>:

.back-to-top {
  mix-blend-mode: difference;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 7px;
  z-index: 100
}

Dan, tambahkan kode berikut di bagian bawah tepat di atas tag </body>:

<div>
  <a class='back-to-top' href='#'>
    <svg fill='white' viewBox='0 0 512 512' width='60' xmlns='http://www.w3.org/2000/svg'><path d='M256 504c137 0 248-111 248-248S393 8 256 8 8 119 8 256s111 248 248 248zm0-448c110.5 0 200 89.5 200 200s-89.5 200-200 200S56 366.5 56 256 145.5 56 256 56zm20 328h-40c-6.6 0-12-5.4-12-12V256h-67c-10.7 0-16-12.9-8.5-20.5l99-99c4.7-4.7 12.3-4.7 17 0l99 99c7.6 7.6 2.2 20.5-8.5 20.5h-67v116c0 6.6-5.4 12-12 12z'/>
      <title>Kembali ke atas</title>
    </svg>
  </a>
</div>

Warna tombol akan berubah membedakan sesuai keadaan sekelilingnya. Karena penampilan setiap blog berbeda, tentunya diperlukan penyesuaian agar tombol ini menyatu dengan blog Anda. Ada dua cara yang bisa dilakukan untuk menyerasikan tombol ini dengan blog kita:

  1. Ubah nilai mix-blend-mode dalam CSS .back-to-top. Rujuk laman MSDN ini untuk keterangan lebih lanjut.
  2. Ubah warna tombol dengan mengubah nilai fill yang terletak di dalam tag svg.

Demikian. Cara manapun yang dipilih tidak menjadi masalah, yang penting navigasi halaman bagi pembaca artikel blog kita dimudahkan. Bahkan sebuah tautan menggunakan <a href="#">Back to Top</a> pun masih lebih baik dari pada tidak ada sama sekali.