Skip to main content

Cara Membuat Jump/Back to Top untuk Halaman Web/Blog

Cara Membuat Jump/Back to Top untuk Halaman Web/Blog

Jump/Back to Top adalah tombol yang biasanya dipasang pada bagian paling bawah website/blog dan ada juga yang memasangnya mengikuti scrolling mengambang yang tujuannya sama jika di tap/klik akan meloncat ke bagian konten paling atas untuk menghemat waktu scrolling.

Ada berbagai macam cara memasang Jump/Back to Top pada Blog mulai dari menggunakan element class id/name hingga dengan atau tanpa Javascript.

Perbedaannya mungkin, jika pakai atribut link setelah di klik akan loading dan pakai JS tidak.

Untuk pemasangan menggunakan element class id/name biasanya dipasang dengan kode seperti berikut.

Batasnya:
<a name="top"/> atau <div id="top"/>

Linknya, jika di klik akan meloncat pada batas yang ditentukan diatas.
<a href="#top">Top</a>

Sedangkan dengan Javascript.

Perlu memasang JS berikut:
<script>//<![CDATA[ 
var tops = document.getElementById("top");tops.onclick = function(){document.body.scrollTop = 0;document.documentElement.scrollTop = 0;} 
//]]></script>

Pasang JS diatas pada bagian paling bawah dalam Template diatasnya </body>, biasanya begitu khusus JS perlu dipasang pada bagian paling bawah agar mendapat proses render terakhir bertujuan agar tidak memberatkan loading.

Buttonnya, jika di klik akan meloncat tanpa batas ke paling atas halaman.
<button id='top'>Top&amp;uarr;</button>

Atau bisa juga:
<div id='top'>Top</div>

Untuk hasil tampilannya sangat sederhana karena hanya kode dasar alias masih default, perlu ditambahi ini dan itu, misalnya gambar atau style css agar tampil menarik, silakan kreasikan sendiri.

Berikut ini dua versi lainnya yaitu Jquery dan Vanilla, direkomendasikan pakai vanilla karena lebih moderen.

Pemasangannya:
Taruh CSS ke bagian css dan Javascriptnya ke bagian paling bawah dalam Template di atas </body> atau taruh saja keduanya baik CSS maupun JS dibagian atas </body>

Dan tombolnya sebetulnya bisa di pasang dimana saja bebas tapi sayangnya saya pasang dibagian atas </body> tidak muncul. Kalau Template saya mah enak banyak tempat menaruh kode. Namun ide terbaik mungkin pasang saja di dekat "Powered".

Dan ini tombol versi jquery:
<div class='backToTop'>Top</div>

Versi JQuery:
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<style>
.backToTop{
cursor: pointer;
border-radius: 50%;
border: 1px solid silver;
box-shadow: 0 0 10px silver;
background: white;
color: black;
padding: 8px 10px;
font-size: 18px;
position: fixed;
bottom: 20px;
right: 20px
}
</style>
<script>/*<![CDATA[*/ var $backToTop = $(".backToTop"); $backToTop.hide(); $(window).on('scroll', function() { if ($(this).scrollTop() > 200) { $backToTop.fadeIn(); } else { $backToTop.fadeOut(); } } ); $backToTop.on('click', function(e) { $("html, body").animate({scrollTop: 0}, 50); }); /*]]>*/</script>


Versi Vanilla (Rekomendasi):
<style>.back-to-top { transition: all .25s ease-in-out; position: fixed; bottom: 0; right: 0; display: inline-flex; cursor: pointer; align-items: center; justify-content: center; margin: 0 1em 1em 0; border: 1px solid silver; box-shadow: 0 0 10px silver; border-radius: 50%; padding: .25em; width: 30px; height: 30px; background-color: white; } .show { visibility: visible; opacity: 1; } .hide { visibility: hidden; opacity: 0; } .back-to-top svg { fill: black; width: 20px; height: 20px; } 
</style>
<script>/*<![CDATA[*/ const scrollToTopButton = document.getElementById('jump-to-top'); const scrollFunc = () => { y = window.scrollY; if (y > 200) { scrollToTopButton.className = 'back-to-top show'; } else { scrollToTopButton.className = 'back-to-top hide'; } }; window.addEventListener('scroll', scrollFunc); const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 10); } }; scrollToTopButton.onclick = function(e) { e.preventDefault(); scrollToTop(); } /*]]>*/</script>


Keterangan buat vanilla:

if (y > 200) artinya saat halaman di scroll kebawah sekitar 200px baru akan muncul tombolnya. Set ke 0 jika ingin langsung muncul. Namun perkiraan tinggi posting bisa mencapai 800px lebih, jadi silakan set sesuai selera.

window.scrollTo(0, c - c / 10); angka 10 ini setelan untuk smooth, kehalusan scroll, bisa di set ke 100 misalnya, semakin tinggi angkanya semakin pelan scrolling/pergulirannya, ketika tombol TOP di tap halaman akan bergerak perlahan keatas sampai paling atas.

Dan ini tombol versi vanila:
<a class='back-to-top hide' href='' id='jump-to-top'><svg viewbox='0 0 12 6' xmlns='https://www.w3.org/2000/svg'><path d='M12 6H0l6-6z'/></svg></a>

Pada intinya semua kode diatas sensitif jika langsung dimasukkan kedalam Template, untuk lebih mudahnya ada baiknya pasang "Wadget HTML/JavaScript" dan masukin semua kode diatas kedalam Widget tersebut tanpa harus repot menaruh diatas </body>

Untuk contoh hasilnya hanya bisa dilihat di posting ini saja, soalnya hanya terpasang di halaman ini.

Comments


  1. Yang sering saya dapati back to top dipasang mengikuti scrolling. Itu kodenya sama atau beda?

    ReplyDelete
    Replies
    1. Coba dicari kodenya, cakep tuh kalau ada yang mengikuti scrolling. Apalagi kalau masangnya ngga ribet mau dah saya pasang di blog saya

      Delete
    2. Iya mas, nanti saya tambahkan dalam post diatas kalau ada 👍

      Delete

Post a Comment

Jika ada hal yang kurang jelas, misalnya tips dan trik yang tidak berfungsi, ulasan yang sudah usang, meski mengetahui ada ulasan yang memerlukan pembaruan terkadang kami malas untuk memperbaruinya, jadi silakan tanyakan saja melalui kolom komentar dan akan kita bahas bersama. Regards!