Cara Bikin Tombol Back To Top Tanpa Plugin

TokoDaring.Com – Cara Bikin Tombol Back To Top Tanpa Plugin. Anda mungkin menggunakan tema WordPress gratis yang memiliki banyak keterbatasan. Dan ingin memiliki Tombol Back To Top tanpa harus memasang plugin. Begini cara bikin tombol Back To Top di website toko daring WordPress WooCommerce tanpa plugin.

Artikel terkait :

Saran: Jangan Gunakan Tools AI Untuk SEO

Apa itu tombol Back To Top

Tombol Back To Top adalah elemen HTML yang biasanya ada pada pojok kanan bawah halaman website. Fungsinya jika itu di click maka pengguna akan di bawa kembali ke seksi atas halaman website. Mungkin karena konten yang terlalu panjang dan pengguna ingin menuju kembali ke lokasi navigasi menu website anda.

Membuat tombol back-to-top memang sangat mudah jika menggunakan plugin, karena banyak plugin yang tersedia. Coba saja menuju halaman repository plugin WordPress dan cari dengan query “Back to top”. Banyak plugin yang bisa anda gunakan di sana.

Cara bikin tombol Back To Top tanpa plugin

Tetapi banyak orang yang ingin menghemat pemasangan plugin terutama untuk hal-hal yang sederhana. Pada hari yang ceria ini, kami buatkan tutorial Cara bikin tombol Back To Top tanpa plugin. Note: Jika anda memiliki kode yang ingin dibagikan tentang Coding WordPress WooCommerce, buat postnya langsung via halaman Frontend Editor untuk kategory Coding For Fun.

1. Buat fungsi WordPress

Yang pertama kita buat fungsi WordPress yang terdiri dari sebuah div id. Sebagai berikut:

add_action( 'wp_footer', 'tkdr_gotop' );
function tkdr_gotop() { ?>
<div id="up_btn"><
  a href="#" title="Go Up!">Top!</a>
</div>

2. Tambahkan CSS

Selanjutnya tambahkan kode CSS untuk memberikan warna tulisan warna backgroud dan sebagainya, sesuaikan dengan warna tema yang anda gunakan.

#up_btn {
    bottom: 150px;
    position: fixed;
    display: none;
    right: 10px;
    z-index: 99;
}
#up_btn a {
    align-items: center;
    background: #0000ff;
    border-radius: 50%;
    box-shadow:2px 2px #ab641d;
    color:#fff;
    direction: ltr;
    display: flex;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    width: 48px;
}
#up_btn a:hover {
    background: #ff0000;
    box-shadow:2px 2px #fcaf3b;
    color: #000;
}

3. Tambahkan Javaascript

Selanjutnya tambahkan beberapa kode javascript agar ketika itu di klik maka akan bekerja.

function scroll_to_top_btn() {
    var up_btn = $('#up_btn');
    // Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1700) {
            up_btn.fadeIn(300);
        } else {
            up_btn.fadeOut(300);
        }
    });
    // Click event to scroll to top
    up_btn.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
}
scroll_to_top_btn();

4. Bonus: Kode untuk tracking GA

Jika Anda menggunakan Google Analytics untuk melacak aktivitas di situs website Anda, Anda dapat menambahkan kode berikut untuk melacak peristiwa pengguna yang mengklik tombol back to top ini:

$("#up_btn").on('click', function() {
      ga('send', 'event', 'Links', 'UpButton Clicks', 'User Scrolled to Top');
 });

5. Kode lengkap cara bikin tombol Back To Top

Dan ini adalah kode lengkap jika anda menuliskannya secara langsung di file function.php anda. Dan hasilnya juga bisa anda lihat sebelah kanan bawah website ini.

/* 
 * Cara Bikin Tombol Back To Top 
 * Tanpa Plugin WordPress
 */

add_action( 'wp_footer', 'tkdr_gotop' );
function tkdr_gotop() { ?>
<div id="up_btn"><a href="#" title="Go Up!">Top!</a></div>
<style type="text/css">
#up_btn {
    bottom: 150px;
    position: fixed;
    display: none;
    right: 10px;
    z-index: 99;
}
#up_btn a {
    align-items: center;
    background: #fcaf3b;
    border-radius: 50%;
    box-shadow:2px 2px #ab641d;
    color:#fff;
    direction: ltr;
    display: flex;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    width: 48px;
}
#up_btn a:hover {
    background: #ab641d;
    box-shadow:2px 2px #fcaf3b;
    color: #000;
}
</style>
<script>
function scroll_to_top_btn() {
    var up_btn = $('#up_btn');
    // Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1700) {
            up_btn.fadeIn(300);
        } else {
            up_btn.fadeOut(300);
        }
    });
    // Click event to scroll to top
    up_btn.click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
}
scroll_to_top_btn();
</script>
<?php
}