Cara Bikin Tombol Back to Top (Kembali ke Atas) Melayang dengan Animasi Smooth

Q: Apakah posisi tombol bisa diubah?

Ya. Posisi dapat diubah melalui properti CSS seperti bottom dan right.

Q: Apakah warna tombol bisa diganti?

Ya. Warna tombol dapat diubah melalui properti background-color pada CSS.

Cara Membuat Tombol Back to Top atau Kembali ke Atas di Blogger

Memiliki artikel yang panjang dan informatif memang bagus untuk memberikan pembahasan yang lengkap kepada pembaca. Namun, semakin panjang sebuah halaman, semakin jauh pula posisi pembaca dari bagian atas ketika selesai membaca. Pada kondisi tersebut, tombol Back to Top atau kembali ke atas dapat menjadi fitur navigasi yang sangat membantu.

Dengan menambahkan tombol Back to Top di Blogger, pengunjung dapat kembali ke bagian atas halaman tanpa harus menggulir layar secara manual dalam waktu lama. Tombol dapat dibuat menggunakan kombinasi HTML, CSS, dan JavaScript tanpa membutuhkan struktur yang rumit.

Pada tutorial ini, Anda akan mempelajari cara membuat tombol Back to Top di Blogger yang muncul setelah halaman digulir ke bawah dan kembali ke bagian atas dengan animasi scroll yang halus.

Apa Itu Tombol Back to Top?

Back to Top adalah elemen navigasi yang memungkinkan pengunjung kembali ke bagian paling atas halaman dengan satu klik atau sentuhan.

Fitur ini biasanya digunakan pada website atau blog yang memiliki konten panjang. Tombol dapat ditempatkan secara fixed sehingga tetap berada di area tertentu pada layar ketika pengguna menggulir halaman.

Pada contoh ini, tombol ditempatkan di bagian kanan bawah layar dan baru ditampilkan setelah pengguna menggulir halaman melewati batas tertentu.

Bagaimana Cara Kerja Script Back to Top?

Script ini terdiri dari tiga komponen utama:

HTML untuk membuat elemen tombol.
CSS untuk mengatur tampilan dan posisi tombol.
JavaScript untuk mendeteksi scroll dan menjalankan animasi kembali ke atas.

Alurnya cukup sederhana. Ketika halaman pertama kali dibuka, tombol disembunyikan. Setelah pengguna menggulir halaman lebih dari 300 piksel, tombol akan ditampilkan. Ketika tombol diklik, JavaScript menjalankan perintah window.scrollTo() dengan perilaku scroll yang halus.

Manfaat Tombol Back to Top di Blogger

Penambahan tombol kembali ke atas dapat memberikan pengalaman navigasi yang lebih praktis, terutama pada artikel dengan jumlah konten yang panjang.

Memudahkan navigasi artikel panjang.
Menghemat waktu pengguna ketika ingin kembali ke bagian atas halaman.
Meningkatkan kenyamanan pengguna mobile karena layar smartphone memiliki area tampilan yang lebih terbatas.
Membuat tampilan blog lebih modern dengan elemen navigasi tambahan.
Dapat dibuat menggunakan kode sederhana tanpa library tambahan.

Fitur ini tidak secara otomatis meningkatkan peringkat SEO atau menurunkan bounce rate. Namun, navigasi yang lebih nyaman dapat menjadi bagian dari upaya meningkatkan pengalaman pengguna di dalam blog.

Contoh Penggunaan Tombol Back to Top

Fitur ini sangat cocok digunakan pada artikel seperti:

Tutorial Blogger.
Panduan HTML dan CSS.
Tutorial JavaScript.
Artikel tutorial yang panjang.
Review produk dengan banyak pembahasan.
Dokumentasi atau panduan teknis.

Misalnya, seorang pengunjung membaca artikel tutorial yang terdiri dari beberapa ribu kata. Setelah mencapai bagian bawah artikel, pengunjung dapat menekan tombol Back to Top untuk kembali ke bagian atas tanpa perlu melakukan scroll panjang secara manual.

Kode CSS Tombol Back to Top Blogger

Bagian pertama adalah CSS yang mengatur posisi, warna, ukuran, bentuk, dan efek hover pada tombol.


<style>
#tombolKeAtas {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 50px;
    font-size: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#tombolKeAtas:hover {
    background-color: #0056b3;
    transform: translateY(-5px);
}
</style>

Penjelasan CSS

Pada kode tersebut, position: fixed membuat tombol tetap berada pada posisi yang ditentukan di layar ketika halaman digulir.

bottom: 30px;
right: 30px;

Kedua properti tersebut menempatkan tombol sekitar 30 piksel dari bagian bawah dan kanan layar.

Sementara itu:

display: none;

digunakan agar tombol tidak terlihat ketika halaman baru pertama kali dibuka.

Kode HTML Tombol Back to Top

Setelah CSS dibuat, tambahkan elemen HTML sebagai tombol yang akan digunakan pengunjung.


<button id="tombolKeAtas" title="Kembali ke Atas">&#8679;</button>

Karakter ⇧ digunakan sebagai simbol panah ke atas. Anda juga dapat menggantinya dengan karakter atau ikon lain sesuai desain template.

Kode JavaScript untuk Animasi Back to Top

JavaScript berfungsi sebagai pengatur perilaku tombol. Script akan mendeteksi posisi scroll dan menampilkan tombol ketika pengguna sudah menggulir halaman cukup jauh.


<script>
document.addEventListener("DOMContentLoaded", function() {
    var tombolAjaib = document.getElementById("tombolKeAtas");

    window.addEventListener("scroll", function() {
        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
            tombolAjaib.style.display = "block";
        } else {
            tombolAjaib.style.display = "none";
        }
    });

    tombolAjaib.addEventListener("click", function() {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
});
</script>

Penjelasan JavaScript

Bagian berikut:

window.addEventListener("scroll", function() {

digunakan untuk mendeteksi ketika pengguna melakukan scroll pada halaman.

Kemudian terdapat kondisi:

if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300)

Artinya, tombol akan ditampilkan setelah posisi scroll melewati 300 piksel.

Ketika tombol ditekan, script menjalankan:

window.scrollTo({
    top: 0,
    behavior: "smooth"
});

Perintah tersebut mengarahkan posisi halaman ke bagian paling atas dengan efek scroll yang halus.

Kode Lengkap Tombol Back to Top Blogger

Jika Anda ingin memasang semuanya sekaligus, berikut kode lengkapnya:


<style>
#tombolKeAtas {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    border: none;
    outline: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 50px;
    font-size: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#tombolKeAtas:hover {
    background-color: #0056b3;
    transform: translateY(-5px);
}
</style>

<button id="tombolKeAtas" title="Kembali ke Atas">&#8679;</button>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var tombolAjaib = document.getElementById("tombolKeAtas");

    window.addEventListener("scroll", function() {
        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
            tombolAjaib.style.display = "block";
        } else {
            tombolAjaib.style.display = "none";
        }
    });

    tombolAjaib.addEventListener("click", function() {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
});
</script>

Cara Memasang Tombol Back to Top di Blogger

Anda dapat memasang kode tersebut melalui bagian Tata Letak Blogger menggunakan gadget HTML/JavaScript.

Langkah 1: Masuk ke Dashboard Blogger

Buka dashboard Blogger dan pilih blog yang ingin ditambahkan tombol Back to Top.

Langkah 2: Buka Menu Tata Letak

Pilih menu Tata Letak pada dashboard Blogger.

Langkah 3: Tambahkan Gadget HTML/JavaScript

Pilih Tambahkan Gadget, kemudian pilih gadget HTML/JavaScript.

Langkah 4: Masukkan Kode

Biarkan bagian judul kosong, kemudian tempelkan kode CSS, HTML, dan JavaScript lengkap yang sudah disediakan.

Langkah 5: Simpan

Klik Simpan, kemudian buka blog untuk melihat hasilnya.

Jika Anda ingin tombol tersedia di seluruh halaman, pastikan gadget ditempatkan pada area layout yang memang dirender oleh template di berbagai halaman.

Cara Mengatur Jarak Tombol dari Tepi Layar

Posisi tombol dapat diubah melalui CSS.

Untuk mengatur jarak dari bawah:

bottom: 30px;

Untuk mengatur jarak dari kanan:

right: 30px;

Misalnya Anda ingin tombol lebih dekat dengan sudut layar:

bottom: 20px;
right: 20px;

Cara Mengubah Warna Tombol Back to Top

Warna tombol dapat disesuaikan dengan warna utama template Blogger Anda.

Cari:

background-color: #007bff;

Kemudian ganti kode warnanya sesuai kebutuhan.

Warna ketika kursor berada di atas tombol diatur melalui:

#tombolKeAtas:hover {
    background-color: #0056b3;
}

Dengan demikian, Anda dapat menyesuaikan warna tombol agar lebih menyatu dengan identitas visual blog.

Cara Membuat Tombol Muncul Lebih Cepat

Pada kode JavaScript, tombol muncul ketika posisi scroll sudah melewati 300 piksel.

scrollTop > 300

Jika ingin tombol muncul lebih cepat, angka tersebut dapat diperkecil.

Contoh:

scrollTop > 150

Dengan pengaturan tersebut, tombol akan mulai muncul setelah pengguna menggulir sekitar 150 piksel.

Cara Membuat Tombol Muncul Setelah Scroll Lebih Jauh

Sebaliknya, jika Anda tidak ingin tombol terlalu cepat muncul, nilai tersebut dapat diperbesar.

scrollTop > 500

Pengaturan ini cocok untuk blog yang memiliki artikel panjang sehingga tombol baru muncul setelah pengunjung cukup jauh menggulir halaman.

Tips Membuat Tombol Back to Top Tetap Nyaman di HP

Karena sebagian besar pengunjung blog dapat menggunakan perangkat mobile, ukuran dan posisi tombol perlu diperhatikan.

Jangan membuat tombol terlalu besar.
Jangan menempatkan tombol terlalu dekat dengan tepi layar.
Pastikan tombol tidak menutupi tombol navigasi atau elemen penting lainnya.
Gunakan ukuran ikon yang mudah terlihat.
Uji tampilan pada smartphone dan desktop.

Anda dapat menggunakan media query jika ingin mengubah ukuran tombol khusus untuk perangkat dengan layar kecil.


@media (max-width: 480px) {
    #tombolKeAtas {
        bottom: 20px;
        right: 20px;
        padding: 10px 14px;
        font-size: 18px;
    }
}

Cara Menguji Script Back to Top

Setelah kode dipasang, lakukan pengujian sebelum membiarkannya digunakan pada blog.

Buka halaman blog.
Pastikan tombol tidak terlihat ketika berada di bagian paling atas.
Gulir halaman ke bawah lebih dari 300 piksel.
Pastikan tombol muncul di kanan bawah.
Klik tombol tersebut.
Pastikan halaman bergerak kembali ke bagian atas dengan animasi yang halus.
Uji kembali menggunakan smartphone.

Masalah Umum Tombol Back to Top Tidak Berfungsi

1. Tombol Tidak Muncul

Periksa apakah elemen HTML menggunakan ID yang sama dengan ID yang dipanggil oleh JavaScript.

id="tombolKeAtas"

ID tersebut harus sama dengan:

getElementById("tombolKeAtas")

2. Tombol Selalu Terlihat

Periksa bagian CSS berikut:

display: none;

Properti tersebut diperlukan agar tombol disembunyikan sebelum pengguna menggulir halaman.

3. Animasi Tidak Berjalan

Periksa bagian JavaScript berikut:

behavior: "smooth"

Jika browser atau lingkungan tertentu tidak menerapkan perilaku tersebut seperti yang diharapkan, halaman mungkin tetap kembali ke atas tanpa animasi yang sama.

4. Tombol Menutupi Konten

Jika tombol menutupi elemen penting seperti tombol WhatsApp, navigasi, atau bagian footer, ubah nilai bottom dan right agar posisinya lebih sesuai.

Apakah Tombol Back to Top Mempengaruhi SEO?

Tombol Back to Top bukan faktor SEO utama yang secara langsung menentukan posisi sebuah artikel di mesin pencari. Fungsi utamanya adalah membantu navigasi dan meningkatkan kenyamanan pengguna.

SEO Blogger tetap perlu memperhatikan hal-hal yang lebih fundamental seperti kualitas konten, relevansi pencarian, struktur HTML, internal link, optimasi gambar, performa halaman, dan pengalaman pengguna.

Karena itu, gunakan tombol Back to Top sebagai fitur pendukung navigasi, bukan sebagai teknik untuk memanipulasi peringkat mesin pencari.

FAQ Tombol Back to Top Blogger

Apa itu tombol Back to Top di Blogger?

Back to Top adalah tombol navigasi yang memungkinkan pengunjung kembali ke bagian paling atas halaman dengan satu klik atau sentuhan.

Apakah tombol Back to Top bisa dibuat tanpa plugin?

Ya. Tombol Back to Top dapat dibuat menggunakan HTML, CSS, dan JavaScript sederhana tanpa menggunakan plugin atau library tambahan.

Apakah tombol Back to Top bisa digunakan di HP?

Ya. Tombol dapat dibuat responsif sehingga nyaman digunakan pada smartphone maupun perangkat desktop.

Kenapa tombol Back to Top tidak muncul?

Beberapa penyebabnya antara lain ID HTML tidak sesuai dengan JavaScript, kode tidak ditempatkan dengan benar, atau terdapat konflik dengan script lain pada template.

Apakah posisi tombol bisa diubah?

Ya. Posisi dapat diubah melalui properti CSS seperti bottom dan right.

Apakah warna tombol bisa diganti?

Ya. Warna tombol dapat diubah melalui properti background-color pada CSS.

Apakah tombol Back to Top meningkatkan SEO?

Tombol Back to Top bukan faktor ranking SEO secara langsung. Fitur ini lebih berfungsi untuk membantu navigasi dan memberikan pengalaman pengguna yang lebih nyaman.

Kesimpulan

Cara membuat tombol Back to Top di Blogger dapat dilakukan dengan HTML, CSS, dan JavaScript sederhana. CSS digunakan untuk mengatur tampilan dan posisi tombol, HTML digunakan sebagai elemen tombol, sedangkan JavaScript menangani deteksi scroll serta proses kembali ke bagian atas halaman.

Dengan konfigurasi yang tepat, tombol dapat disembunyikan ketika halaman berada di bagian atas dan muncul setelah pengguna menggulir beberapa ratus piksel. Saat tombol ditekan, halaman akan kembali ke bagian atas menggunakan animasi smooth scroll.

Fitur ini sangat cocok untuk artikel Blogger yang panjang karena dapat membantu pengunjung berpindah kembali ke bagian atas dengan lebih praktis. Pastikan Anda melakukan pengujian pada perangkat desktop dan smartphone agar tombol tidak mengganggu elemen navigasi lain.

Selain menambahkan fitur Back to Top, tetap prioritaskan kualitas artikel, struktur konten yang jelas, kecepatan halaman, responsivitas, dan pengalaman pengguna sebagai bagian utama dari optimasi SEO Blogger.

Menu Navigasi