Membuat Tombol “Go to Top” di Elementor dengan Javascript:

Berikut adalah langkah-langkah untuk membuat tombol “Go to Top” di Elementor yang akan hilang ketika sudah berada di atas halaman dan muncul ketika scrolling ke bawah:

Langkah 1: Buat Tombol

1. Buka Elementor dan edit halaman di mana Anda ingin menambahkan tombol “Go to Top”.
2. Seret dan jatuhkan widget “Button” dari panel kiri ke halaman Anda.
3. Sesuaikan teks tombol, gaya, dan posisi sesuai keinginan Anda.
4. Untuk saat ini, posisikan tombol di mana saja pada halaman.

Langkah 2: Sembunyikan Tombol Awalnya

1. Buka tab “Advanced” di pengaturan widget Button.
2. Temukan opsi “CSS ID” dan masukkan nilai unik, seperti “go-to-top-button”.
3. Buka tab “Responsive” dan temukan opsi “Visibility”.
4. Centang kotak “Hide on Desktop”.
5. Simpan pengaturan widget Button.

Langkah 3: Tambahkan Javascript

1. Buka pengaturan halaman Elementor.
2. Buka tab “Custom CSS & JavaScript”.
3. Di bagian “Custom JavaScript”, masukkan kode javascript berikut:

JavaScript

(function($) {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 0) {
      $("#go-to-top-button").fadeIn();
    } else {
      $("#go-to-top-button").fadeOut();
    }
  });
})(jQuery);

Gunakan kode dengan hati-hati.

4. Simpan pengaturan halaman.

Penjelasan Javascript:

• Kode javascript di atas menggunakan fungsi jQuery $(window).scroll() untuk mendeteksi event scroll pada window.
• Setiap kali window di scroll, kode akan memeriksa nilai $(window).scrollTop().
• Jika nilai scroll lebih dari 0 (artinya pengguna telah scrolling ke bawah), tombol “Go to Top” akan ditampilkan dengan menggunakan $("#go-to-top-button").fadeIn().
• Jika nilai scroll 0 (artinya pengguna berada di atas halaman), tombol “Go to Top” akan disembunyikan dengan menggunakan $("#go-to-top-button").fadeOut().

Catatan:

• Pastikan Anda telah menginstal jQuery di website Anda.
• Anda dapat menyesuaikan kode javascript di atas sesuai dengan kebutuhan Anda, seperti mengubah nilai scroll yang memicu munculnya tombol.
• Anda juga dapat menambahkan animasi atau efek lainnya pada tombol “Go to Top” untuk membuatnya lebih menarik.

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat tombol “Go to Top” di Elementor yang akan hilang ketika sudah berada di atas halaman dan muncul ketika scrolling ke bawah.