Cara membuat jump to top di 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>

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

<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;z-index:999 } .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.