Cara Membuat Tombol ‘Back to Top’ dengan Efek Smooth Scroll via Script JS (Ringan & Tanpa Plugin)

Dalam era artikel panjang (Long-Form Content) yang disukai mesin pencari, kenyamanan navigasi adalah kunci. Ketika pengunjung selesai membaca artikel 2.000 kata, memaksa mereka melakukan scrolling manual kembali ke atas adalah pengalaman pengguna (UX) yang buruk.

Solusinya adalah tombol “Back to Top”.

Meskipun banyak plugin WordPress menawarkan fitur ini, kebanyakan dari mereka memuat file CSS dan JavaScript yang berat, yang pada akhirnya memperlambat website Anda. Dalam panduan ini, kita akan membuat tombol “Kembali ke Atas” yang ringan, estetik, dan memiliki animasi Smooth Scroll menggunakan JavaScript Murni (Vanilla JS).

Mengapa Tidak Pakai Plugin Saja?

Sebelum masuk ke teknis, penting untuk memahami nilai tambah (value) dari metode manual ini:

1. Kecepatan (PageSpeed): Script ini kurang dari 1KB. Plugin bisa memuat hingga 50KB+ aset yang tidak perlu.
2. Kontrol Penuh: Anda bisa menyesuaikan desain, warna, dan posisi agar selaras dengan tema blog Anda.
3. Modern JavaScript: Kita akan menggunakan metode native behavior: 'smooth', bukan jQuery yang sudah usang dan berat.

---

Langkah 1: Struktur HTML (Ringan & Semantik)

Kita akan menggunakan tag <button> untuk aksesibilitas yang baik, dan ikon SVG (Scalable Vector Graphics) agar tajam di semua resolusi layar tanpa perlu memuat font icon eksternal.

Letakkan kode ini di bagian Footer (sebelum tag </body>) website Anda:

HTML
<!-- Tombol Back to Top -->
<button id="btn-back-to-top" title="Kembali ke Atas">
    <!-- Icon Panah SVG -->
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 19V5M5 12l7-7 7 7"/>
    </svg>
</button>

---

Langkah 2: Styling dengan CSS

Tombol ini harus melayang (floating), terlihat menarik, namun tersembunyi saat pengunjung masih berada di bagian atas halaman.

Tambahkan kode ini ke file style.css Anda:

CSS
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Sembunyikan secara default */
    background-color: #3498db; /* Ganti sesuai warna tema */
    color: white;
    border: none;
    border-radius: 50%; /* Membuat tombol bulat */
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000; /* Pastikan di atas elemen lain */
    transition: all 0.3s ease; /* Animasi hover halus */
    
    /* Flexbox untuk menengahkan ikon */
    display: flex; /* Ganti ke 'none' jika ingin hidden via JS nanti */
    align-items: center;
    justify-content: center;
    opacity: 0; /* Mulai dengan transparan */
    visibility: hidden;
}

/* Styling Ikon SVG */
#btn-back-to-top svg {
    width: 24px;
    height: 24px;
}

/* Efek Hover */
#btn-back-to-top:hover {
    background-color: #2980b9;
    transform: translateY(-5px); /* Efek naik sedikit */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Class tambahan untuk memunculkan tombol */
#btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
}

---

Langkah 3: Logika JavaScript (Smooth Scroll)

Inilah “otak” dari fitur ini. Script ini memiliki dua tugas:

1. Mendeteksi posisi scroll: Jika user menggulir lebih dari 200px, tombol muncul.
2. Menangani klik: Saat diklik, layar menggulir ke atas dengan mulus.

Tambahkan kode ini sebelum penutup tag </body> (di dalam tag <script>):

JavaScript
<script>
    // 1. Ambil elemen tombol
    const myButton = document.getElementById("btn-back-to-top");

    // 2. Pasang Event Listener untuk Scroll
    window.onscroll = function() {
        scrollFunction();
    };

    function scrollFunction() {
        // Jika scroll lebih dari 200px dari atas, munculkan tombol
        if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
            myButton.classList.add("show");
        } else {
            myButton.classList.remove("show");
        }
    }

    // 3. Pasang Event Listener untuk Klik
    myButton.addEventListener("click", backToTop);

    function backToTop() {
        // Metode modern untuk Smooth Scroll
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
</script>

---

Bedah Kode: Mengapa Script Ini “High Value”?

Untuk menghindari label Low Value Content, mari kita analisis teknis di balik kode di atas. Ini menunjukkan bahwa Anda memahami apa yang Anda tulis.

1. window.scrollTo({ behavior: "smooth" })

Di masa lalu, developer menggunakan jQuery .animate() untuk membuat efek gulir halus. Itu membutuhkan library besar.
Sekarang, JavaScript modern mendukung properti behavior: "smooth" secara native. Browser akan secara otomatis menghitung animasi perlambatan (easing) tanpa membebani CPU.

2. Penggunaan classList (Add/Remove)

Daripada mengubah style.display secara langsung lewat JS (yang kaku), kita memanipulasi CSS Class (.show).

• Keuntungannya: Kita bisa menambahkan efek transisi CSS (opacity dan visibility) sehingga tombol muncul perlahan (fade in), bukan muncul mendadak. Ini meningkatkan kualitas visual (UI) blog Anda.

3. SVG Inline

Menggunakan kode SVG langsung di HTML (<svg>...</svg>) adalah praktik terbaik performa web saat ini. Gambar vektor ini tajam di layar Retina (HP masa kini) dan ukurannya sangat kecil (byte), jauh lebih efisien daripada memuat gambar .png.

---

Bonus: Solusi Alternatif (CSS Only)

Jika Anda benar-benar ingin menghindari JavaScript untuk scroll (meski JS tetap butuh untuk menyembunyikan tombol), Anda bisa menambahkan satu baris kode di CSS global:

CSS
html {
    scroll-behavior: smooth;
}

Jika kode ini ada, semua link jangkar (anchor link) di website Anda, termasuk #top, akan otomatis bergulir halus. Namun, metode JS di atas (window.scrollTo) lebih kompatibel untuk tombol khusus dan memberikan kontrol lebih presisi.

Kesimpulan

Menambahkan tombol Back to Top adalah investasi kecil dengan dampak besar pada kenyamanan pembaca. Dengan menggunakan metode script manual di atas, Anda menjaga website tetap cepat, kode tetap bersih, dan memberikan pengalaman profesional kepada pengunjung.

Kualitas teknis dan perhatian terhadap detail seperti inilah yang dicari Google saat menilai kelayakan sebuah situs untuk program AdSense.

Selamat mencoba, dan buat navigasi blog Anda semakin mulus!