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>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.
