Membuat Tombol Back To Top Smooth Scroll di Blog

Dulu saya pernah membuat tutorial cara membuat tombol back to top pure Javascript, dimana seluruh scriptnya dibuat menggunakan JS murni alias tanpa jQuery. Kelebihannya adalah lebih ringan karena tidak perlu menyisipkan script external dari library jQuery. Namun ada kekurangannya, yaitu pergerakannya kurang lembut dan kadang agak "macet". Jadi saya mau menambahkan versi lain, yaitu smooth scroll back to top di blog dengan jQuery.

Oya, untuk tombol back to top ini pakai icon SVG ya. Makin tambah ringan karena tidak perlu memasukkan library apapun. Bukan Font Awesome atau lainnya yang perlu diimport dulu.

Sesuai judulnya, pada blog diwajibkan memasang script external jQuery dengan menuliskan kode berikut "SESUDAH / DI BAWAH" <head>.
<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Kalau sudah ada, jangan ditambahkan lagi. Langsung saja baca kebawah.

Memasang Tombol Back To Top jQuery di Blog

Pastikan di blog sudah terpasang script jQuery yang caranya dijelaskan di atas. Setelah itu tambahkan CSS berikut "SEBELUM / DI ATAS" </style>.
/* Back To Top by igniel.com */
.ignielToTop {visibility:hidden; width:50px; height:50px; position:fixed; bottom:50px; right: 20px; z-index:99; cursor:pointer; border-radius:100px; opacity:0; -webkit-transform:translateZ(0); transition:all .5s; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop:hover {opacity: 1; background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop.show {visibility:visible; bottom:20px; opacity:1;}

Lanjut tambahkan script ini "SEBELUM / DI ATAS" </body>.
<div class='ignielToTop'/>
<script>
$(document).scroll(function() {
  return $(document).scrollTop() > 300 ? $('.ignielToTop').addClass('show') : $('.ignielToTop').removeClass('show')
  }), $('.ignielToTop').click(function() {
    return $('html,body').animate({
      scrollTop: '0'
    });
});
</script>

Terakhir, simpan template. Dan untuk hasilnya bisa dicek disini.


Tombol smooth back to top smooth with jQuery ini membantu untuk menggeser konten ke bagian teratas tanpa perlu pegal scroll manual.
Baca Juga

Artikel Terkait

2 Komentar

  1. Desain blognya super keren, gan..! Boleh dong kunjung dan kasih saran ke blog newbie guna meningkatkan CTR dan SEO. Trims

    ReplyDelete
  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.