Cara Membuat Tombol Back to Top di Blogger yang Ringan

Artikel yang panjang biasanya membuat pengunjung harus melakukan scroll cukup jauh sebelum mencapai bagian bawah halaman. Setelah selesai membaca, mereka mungkin perlu kembali ke bagian atas untuk membuka menu, mencari artikel lain, atau menggunakan fitur navigasi.

Salah satu solusi sederhana adalah menambahkan back to top Blogger, yaitu tombol yang memungkinkan pengunjung kembali ke bagian atas halaman tanpa harus melakukan scroll secara manual.

Fitur ini tidak membutuhkan library tambahan. Dengan satu elemen HTML, sedikit CSS, dan JavaScript sederhana, Anda dapat membuat tombol kembali ke atas yang ringan dan tetap nyaman digunakan pada desktop maupun smartphone.

Dalam tutorial ini, kita akan membuat tombol yang awalnya tersembunyi, kemudian muncul setelah pengunjung menggulir halaman cukup jauh. Ketika tombol ditekan, halaman akan kembali ke bagian atas dengan animasi scroll yang halus.

Apa Itu Back to Top Blogger?

Back to top Blogger adalah tombol navigasi yang digunakan untuk mengembalikan posisi halaman ke bagian paling atas. Tombol biasanya ditempatkan sebagai elemen floating di salah satu sudut layar sehingga tetap mudah ditemukan ketika pengguna berada jauh di bawah halaman.

Secara teknis, tombol dapat dibuat menggunakan JavaScript untuk mengubah posisi scroll browser. Salah satu metode yang sederhana adalah:

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

Nilai top: 0 menunjukkan posisi paling atas halaman, sedangkan behavior: "smooth" meminta browser melakukan perpindahan dengan animasi yang halus pada browser yang mendukungnya.

Kenapa Perlu Menambahkan Tombol Kembali ke Atas?

Tidak semua halaman membutuhkan tombol ini. Namun, pada blog dengan artikel panjang, tombol tersebut dapat menjadi fitur navigasi yang praktis.

• Memudahkan pengunjung kembali ke bagian atas halaman.
• Berguna untuk artikel tutorial yang panjang.
• Dapat dibuat tanpa library JavaScript tambahan.
• Ukuran dan posisi tombol dapat disesuaikan dengan template.
• Dapat dibuat hanya muncul ketika halaman sudah di-scroll.

Meskipun sederhana, tombol tetap perlu dirancang dengan baik. Tombol yang terlalu besar atau selalu muncul sejak awal justru dapat mengambil ruang dan mengganggu pembacaan.

Bagaimana Sistem Scroll Top Blogger Bekerja?

Versi yang kita buat menggunakan tiga bagian utama:

Komponen	Fungsi
HTML	Membuat tombol yang dapat diklik.
CSS	Mengatur posisi, ukuran, tampilan, dan status tombol.
JavaScript	Mendeteksi posisi scroll dan mengembalikan halaman ke atas.

Cara Membuat Tombol Back to Top di Blogger

Langkah 1: Backup Template Blogger

Sebelum mengedit template, sebaiknya buat backup terlebih dahulu. Ini terutama penting jika Anda akan menambahkan CSS dan JavaScript langsung ke HTML tema.

Backup memungkinkan Anda mengembalikan kondisi template sebelumnya apabila terjadi kesalahan saat menyimpan perubahan.

Langkah 2: Buat HTML Tombol

Tambahkan elemen tombol berikut pada area template yang sesuai:

<button
  id="back-to-top"
  class="back-to-top"
  type="button"
  aria-label="Kembali ke atas">
  ↑
</button>

Tombol menggunakan id unik agar JavaScript dapat menemukannya. Atribut aria-label memberikan nama yang menjelaskan fungsi tombol kepada teknologi bantu.

Langkah 3: Tambahkan CSS Tombol

Berikut CSS sederhana untuk membuat tombol berbentuk lingkaran dan berada di kanan bawah halaman:

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  width: 44px;
  height: 44px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: #222222;
  color: #ffffff;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  opacity: .9;
}

@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

Pada kondisi awal, tombol disembunyikan menggunakan opacity dan visibility. Ketika class show ditambahkan melalui JavaScript, tombol akan muncul.

Langkah 4: Tambahkan JavaScript

Sekarang tambahkan JavaScript untuk mendeteksi posisi scroll dan menjalankan fungsi kembali ke atas:

<script>
document.addEventListener("DOMContentLoaded", function () {
  var backToTop = document.getElementById("back-to-top");

  if (!backToTop) {
    return;
  }

  function toggleButton() {
    if (window.scrollY > 400) {
      backToTop.classList.add("show");
    } else {
      backToTop.classList.remove("show");
    }
  }

  window.addEventListener("scroll", toggleButton, {
    passive: true
  });

  backToTop.addEventListener("click", function () {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });

  toggleButton();
});
</script>

Dalam contoh tersebut, tombol mulai muncul ketika posisi scroll lebih dari 400 piksel. Nilai tersebut dapat diubah sesuai kebutuhan.

Cara Kerja JavaScript Back to Top

Ada beberapa bagian penting dari script di atas yang sebaiknya dipahami agar Anda dapat memodifikasinya sendiri.

Mendeteksi Posisi Scroll

Kode berikut membaca posisi scroll vertikal halaman:

window.scrollY

Jika nilainya lebih dari batas yang kita tentukan, class show ditambahkan ke tombol.

if (window.scrollY > 400) {
  backToTop.classList.add("show");
}

Ketika pengguna kembali mendekati bagian atas, class tersebut dihapus sehingga tombol disembunyikan lagi.

Menangani Event Scroll

JavaScript menggunakan event scroll untuk memeriksa perubahan posisi halaman:

window.addEventListener("scroll", toggleButton, {
  passive: true
});

Opsi passive: true menyatakan bahwa listener tidak akan memanggil preventDefault() untuk event tersebut. Pada event scroll, penggunaan listener pasif dapat membantu browser menangani scrolling tanpa menunggu listener untuk membatalkan event.

Mengembalikan Halaman ke Atas

Ketika tombol ditekan, kode berikut menjalankan scroll ke posisi paling atas:

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

Penggunaan smooth memberikan perpindahan yang lebih halus pada browser yang mendukung smooth scrolling.

Cara Menentukan Kapan Tombol Muncul

Anda dapat mengubah batas scroll sesuai panjang halaman.

Contoh tombol muncul setelah 200 piksel:

if (window.scrollY > 200) {
  backToTop.classList.add("show");
}

Atau setelah 800 piksel:

if (window.scrollY > 800) {
  backToTop.classList.add("show");
}

Tidak ada angka yang wajib digunakan untuk semua blog. Pilih ambang batas yang membuat tombol muncul ketika pengguna memang sudah cukup jauh dari bagian atas.

Cara Membuat Tombol Back to Top Berbentuk Lingkaran

Gunakan border-radius: 50%; jika ingin membuat tombol berbentuk bulat.

.back-to-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

Lebar dan tinggi sebaiknya sama agar bentuk lingkaran tetap proporsional.

Cara Membuat Tombol Back to Top Berbentuk Kotak

Jika desain template lebih cocok menggunakan tombol persegi atau rounded rectangle, ubah border-radius.

.back-to-top {
  width: 46px;
  height: 42px;
  border-radius: 8px;
}

Anda juga dapat menggunakan tombol yang lebih lebar jika ingin menampilkan teks seperti Kembali ke Atas.

Cara Membuat Tombol Back to Top dengan Teks

Tidak harus menggunakan simbol panah. Anda dapat menggantinya dengan teks:

<button
  id="back-to-top"
  class="back-to-top"
  type="button"
  aria-label="Kembali ke atas">
  Kembali ke Atas
</button>

Kemudian sesuaikan dimensinya:

.back-to-top {
  width: auto;
  height: auto;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 8px;
}

Cara Menempatkan Floating Button di Kanan Bawah

Posisi paling umum adalah kanan bawah. CSS yang digunakan adalah:

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Nilai right dan bottom menentukan jarak tombol dari sisi kanan dan bawah viewport.

Cara Memindahkan Tombol ke Kiri Bawah

Jika bagian kanan bawah sudah digunakan tombol WhatsApp, Anda dapat memindahkan tombol kembali ke atas ke sisi kiri:

.back-to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
}

Pilih posisi yang tidak bertabrakan dengan tombol floating lain, widget chat, cookie notice, atau kontrol navigasi template.

Cara Menggabungkan Back to Top dengan Tombol WhatsApp

Jika blog sudah mempunyai tombol WhatsApp floating, jangan menempatkan kedua tombol pada koordinat yang sama.

Misalnya tombol WhatsApp berada di kanan bawah, tombol back to top dapat diletakkan sedikit lebih tinggi:

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 80px;
}

Angka 80px hanya contoh. Sesuaikan dengan tinggi tombol WhatsApp dan jarak yang digunakan pada template.

Cara Membuat Tombol Back to Top Tidak Selalu Terlihat

Tombol yang selalu terlihat sejak awal halaman biasanya tidak diperlukan. Lebih baik tombol hanya muncul setelah pengguna sudah cukup jauh melakukan scroll.

Pada tutorial ini, perilaku tersebut dibuat dengan kombinasi:

opacity: 0;
visibility: hidden;

dan class:

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

JavaScript menjadi bagian yang menambahkan dan menghapus class tersebut berdasarkan posisi scroll.

Cara Membuat Animasi Muncul yang Ringan

Anda tidak membutuhkan animasi yang kompleks. Kombinasi opacity dan transform sudah cukup untuk memberikan efek kemunculan yang sederhana.

.back-to-top {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .2s ease,
    transform .2s ease;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

Animasi singkat seperti ini lebih sederhana untuk dipelihara daripada menambahkan library animasi khusus hanya untuk satu tombol.

Cara Menyesuaikan Tombol dengan Dark Mode Blogger

Jika template mempunyai dark mode, tombol back to top juga perlu diperiksa agar warna dan border tetap sesuai dengan tema.

Misalnya template menggunakan atribut data-theme="dark":

html[data-theme="dark"] .back-to-top {
  background: #f9fafb;
  color: #111827;
}

Gunakan selector yang sesuai dengan sistem dark mode pada template Anda. Jangan menambahkan aturan data-theme baru apabila tema sudah menggunakan mekanisme yang berbeda.

Cara Membuat Tombol Tetap Nyaman di Smartphone

Ukuran tombol perlu disesuaikan dengan layar kecil. Tombol yang terlalu kecil akan sulit disentuh, sedangkan tombol yang terlalu besar dapat menutupi konten.

Contoh media query:

@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

Breakpoint 600px hanyalah contoh. Sesuaikan dengan desain template dan perangkat yang menjadi target pembaca.

Cara Menempatkan Kode pada Template Blogger

Untuk tombol yang ingin ditampilkan pada banyak halaman, struktur HTML, CSS, dan JavaScript biasanya lebih praktis ditempatkan pada template Blogger.

Secara umum, Anda dapat menempatkan CSS pada stylesheet tema dan JavaScript pada area script template yang sesuai. HTML tombol dapat ditempatkan mendekati bagian akhir struktur halaman sehingga tidak mengganggu isi artikel.

Lokasi kode tidak selalu sama pada setiap template Blogger. Karena itu, jangan mengandalkan nomor baris tertentu dari template lain. Cari struktur yang sesuai dengan tema yang sedang digunakan.

Cara Membuat Back to Top Hanya pada Halaman Artikel

Jika Anda tidak ingin tombol muncul di halaman utama, tombol dapat dibatasi hanya pada halaman posting menggunakan conditional tag atau struktur template yang memang hanya aktif pada halaman artikel.

Implementasi conditional tersebut sangat bergantung pada format XML template Blogger. Karena itu, jangan menambahkan kondisi dari template lain tanpa menyesuaikannya dengan struktur tema Anda.

Apakah Back to Top Membutuhkan JavaScript?

Untuk tombol yang memiliki perilaku dinamis seperti muncul setelah scroll dan menyembunyikan diri ketika kembali ke atas, JavaScript merupakan pilihan yang praktis.

Namun, perpindahan scroll ke bagian atas juga dapat dilakukan menggunakan HTML dengan link anchor dan CSS scroll behavior. Pendekatan tersebut lebih sederhana, tetapi tidak memberikan kontrol yang sama terhadap kapan tombol muncul.

Contoh anchor dasar:

<body id="top">
...
<a href="#top">Kembali ke Atas</a>

Metode anchor cocok untuk kebutuhan sangat sederhana, sedangkan JavaScript memberikan kontrol lebih besar untuk membuat floating button yang hanya muncul setelah scroll.

Kesalahan yang Sering Terjadi pada Back to Top Blogger

Kesalahan	Dampak	Solusi
ID tombol tidak sama dengan JavaScript	Script tidak menemukan tombol.	Pastikan id HTML dan selector JavaScript sama.
JavaScript dimuat sebelum elemen tersedia	Elemen tombol tidak ditemukan.	Gunakan DOMContentLoaded atau tempatkan script setelah HTML tombol.
Tombol selalu terlihat	Mengganggu tampilan saat pengunjung masih berada di bagian atas.	Tampilkan tombol hanya setelah ambang scroll tertentu.
z-index terlalu rendah	Tombol berada di belakang elemen lain.	Periksa stacking context dan atur z-index sesuai layout.
Posisi bertabrakan dengan tombol floating lain	Tombol saling menutupi.	Atur bottom atau right agar memiliki jarak.
Tidak menguji mobile	Tombol dapat terlalu kecil atau menutupi konten.	Uji pada beberapa ukuran layar.

Tips Membuat Tombol Kembali ke Atas yang Ringan

• Gunakan JavaScript seperlunya. Tidak perlu menambahkan library besar hanya untuk satu fungsi scroll.
• Gunakan CSS sederhana. Tombol tidak memerlukan animasi yang kompleks.
• Tampilkan setelah scroll. Tombol lebih relevan ketika pengguna sudah berada cukup jauh dari atas.
• Berikan label yang jelas. Gunakan aria-label untuk menjelaskan fungsi tombol.
• Hindari tabrakan dengan elemen floating lain. Periksa tombol WhatsApp, live chat, cookie notice, dan elemen sejenis.
• Uji halaman panjang. Pastikan fungsi tetap berjalan setelah scroll jauh ke bawah.
• Sesuaikan dengan mobile. Ukuran dan jarak dari tepi layar perlu diperiksa pada smartphone.

Cara Menguji Tombol Back to Top

Setelah kode ditambahkan, lakukan pengujian secara menyeluruh.

1. Buka artikel yang cukup panjang.
2. Periksa bahwa tombol tidak muncul ketika berada di bagian atas.
3. Scroll ke bawah lebih dari batas yang ditentukan.
4. Pastikan tombol muncul.
5. Klik tombol.
6. Pastikan halaman kembali ke bagian atas.
7. Scroll kembali ke bawah dan pastikan tombol muncul lagi.
8. Uji pada smartphone.
9. Periksa apakah tombol bertabrakan dengan elemen floating lain.
10. Periksa tampilan ketika dark mode aktif jika template menyediakannya.

Apakah Back to Top Berpengaruh pada SEO?

Tombol kembali ke atas pada dasarnya merupakan fitur navigasi dan kenyamanan pengguna. Jangan menganggap penambahan tombol ini sebagai faktor yang secara otomatis meningkatkan peringkat artikel.

Yang lebih penting adalah memastikan tombol tidak menutupi konten, tidak mengganggu navigasi, dan tidak membuat halaman sulit digunakan. Fitur tambahan sebaiknya tetap mendukung pengalaman pembaca.

Versi Lengkap Back to Top Blogger

Berikut versi lengkap yang menggabungkan HTML, CSS, dan JavaScript dalam satu contoh. Untuk penggunaan pada template, Anda dapat memisahkan CSS dan JavaScript sesuai struktur tema.

<button
  id="back-to-top"
  class="back-to-top"
  type="button"
  aria-label="Kembali ke atas">
  ↑
</button>

<style>
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  width: 44px;
  height: 44px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  background: #222222;
  color: #ffffff;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var backToTop = document.getElementById("back-to-top");

  if (!backToTop) {
    return;
  }

  function toggleButton() {
    if (window.scrollY > 400) {
      backToTop.classList.add("show");
    } else {
      backToTop.classList.remove("show");
    }
  }

  window.addEventListener("scroll", toggleButton, {
    passive: true
  });

  backToTop.addEventListener("click", function () {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });

  toggleButton();
});
</script>

Untuk template Blogger yang sudah mempunyai stylesheet dan script sendiri, lebih baik tidak menempatkan banyak blok <style> dan <script> terpisah pada setiap artikel. CSS dapat dimasukkan ke stylesheet tema dan JavaScript dapat diletakkan satu kali pada template agar lebih mudah dipelihara.

FAQ Back to Top Blogger

1. Apa itu back to top Blogger?

Back to top Blogger adalah tombol navigasi yang digunakan untuk mengembalikan posisi halaman ke bagian atas setelah pengunjung melakukan scroll.

2. Apakah tombol back to top membutuhkan plugin?

Tidak. Tombol dapat dibuat menggunakan HTML, CSS, dan JavaScript sederhana tanpa library tambahan.

3. Bagaimana cara membuat scroll top Blogger dengan JavaScript?

Gunakan window.scrollTo() dengan top: 0. Anda juga dapat menggunakan behavior: "smooth" agar perpindahannya lebih halus pada browser yang mendukungnya.

4. Kenapa tombol back to top tidak muncul?

Periksa ID tombol, JavaScript, class CSS, serta kondisi scroll yang digunakan. Pastikan script dapat menemukan elemen dengan ID yang benar.

5. Kenapa tombol back to top tidak bisa diklik?

Periksa apakah ada elemen lain yang menutupi tombol, apakah z-index sudah sesuai, dan apakah JavaScript mengalami error.

6. Bagaimana agar tombol baru muncul setelah scroll jauh ke bawah?

Ubah nilai ambang pada kondisi window.scrollY. Misalnya, gunakan window.scrollY > 600 agar tombol baru muncul setelah pengguna melewati sekitar 600 piksel.

7. Apakah tombol back to top bisa digunakan di HP?

Bisa. Pastikan ukuran tombol cukup nyaman untuk disentuh dan posisinya tidak menutupi konten atau tombol floating lain.

8. Apakah tombol back to top bisa digabung dengan WhatsApp floating?

Bisa. Anda hanya perlu mengatur posisi masing-masing tombol agar tidak berada di lokasi yang sama. Misalnya, satu tombol dapat menggunakan bottom: 20px dan tombol lainnya bottom: 80px.

9. Apakah back to top bisa dibuat tanpa JavaScript?

Bisa untuk kebutuhan dasar menggunakan link anchor menuju ID tertentu di bagian atas halaman. Namun, JavaScript lebih fleksibel jika Anda ingin tombol muncul dan menghilang berdasarkan posisi scroll.

10. Apakah tombol back to top wajib ada di semua Blogger?

Tidak. Tombol ini paling berguna pada halaman yang cukup panjang. Untuk blog dengan artikel pendek atau navigasi yang sudah sederhana, fitur tersebut mungkin tidak diperlukan.

Kesimpulan

Membuat back to top Blogger dapat dilakukan dengan kombinasi HTML, CSS, dan JavaScript yang sederhana. Tombol dapat dibuat sebagai elemen floating, disembunyikan ketika pengunjung berada di bagian atas, lalu ditampilkan setelah halaman digulir cukup jauh.

JavaScript digunakan untuk memantau posisi scroll melalui window.scrollY, sedangkan window.scrollTo() digunakan untuk mengembalikan halaman ke posisi paling atas. CSS kemudian menangani ukuran, posisi, warna, animasi, dan tampilan responsive.

Agar hasilnya tetap ringan, tidak diperlukan plugin atau library tambahan. Namun, perhatikan struktur template Blogger, terutama z-index, elemen floating lain, selector CSS, serta posisi tombol pada smartphone.

Setelah dipasang, uji tombol pada halaman artikel yang panjang dan beberapa ukuran layar. Pastikan tombol hanya muncul ketika memang diperlukan, dapat diklik dengan mudah, kembali ke atas dengan benar, dan tidak mengganggu pengalaman membaca.