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.

Artikel Terkait

5 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Bisma Adinata 1
    28/5/21
    Profil: https://www.blogger.com/profile/00458976120452654788
    Mantap.. Terima kasih.

    Untuk mengubah warnanya menjadi biru misalnya bagaimana ya ?
  • KarawangPortal
    5/5/21
    Profil: https://www.blogger.com/profile/04680892434149064335
    ini kalau mau di taruh di tengah pooter gmana ya
  • muhammad didik wijaya
    23/12/20
    Profil: https://www.blogger.com/profile/16476443191239685626
    kereeen broo,, its work, dan warnanya sesuai dengan blogkku :*
  • Ahmad Shah Laupa
    26/7/19
    Profil: https://www.blogger.com/profile/08303282183553642554
    kerennnnnn
  • Agama dan Logika
    19/6/19
    Profil: https://www.blogger.com/profile/03535774756797301618
    Desain blognya super keren, gan..! Boleh dong kunjung dan kasih saran ke blog newbie guna meningkatkan CTR dan SEO. Trims