Beranda / BLOGGER

Membuat Tombol Back To Top Smooth Scroll di Blog

Posting Komentar

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.


















Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Membuat Tombol Back To Top Smooth Scroll di Blog"

Posting Komentar