Kode Tombol Kembali ke Atas HTML
Buat Widget Tombol Kembali ke Atas Anda
Cuplikan Layar
Mengapa Orang Suka Elfsight
Bukankah akan menyenangkan jika situs web Anda bisa membimbing pengunjung dengan mudah? Widget Back to Top dari Elfsight melakukan hal itu. Ia memberi pembaca jalan pintas yang ramah untuk melompat ke awal halaman, membuat halaman panjang terasa lebih ringan dan mudah dijelajahi. Proses pemasangan hanya membutuhkan beberapa menit dan tetap berjalan meskipun Anda bukan ahli teknologi — cukup salin potongan kode HTML kecil, tempelkan ke situs Anda, dan Anda siap digunakan.
Jika Anda pernah bertanya-tanya bagaimana cara membuat Tombol Kembali ke Atas di HTML, widget ini menghemat waktu Anda dari menulis kode dari awal. Ia mengurus desain, animasi, dan penempatan secara otomatis.
Tahukah Anda?
Nielsen Norman Group menemukan bahwa pengguna menghabiskan sebagian besar waktu melihat bagian atas halaman.
Mulai gunakan widget Tombol Kembali ke Atas Elfsight hari ini untuk memberi pengunjung cara cepat kembali ke atas – halaman panjang akan terasa rapi dan bebas stres.
Fitur Utama Tombol Kembali ke Atas HTML
Mari menjaga navigasi tetap sederhana, cepat, dan ramah. Inilah yang bisa Anda harapkan sehari-hari:
- Penempatan fleksibel: Pilih tombol mengambang yang rapi atau letakkan secara inline di dalam konten Anda — keduanya mudah diatur.
- Tampilan dan nuansa kustom: Warna, bentuk, ikon, ukuran, bayangan, label – sesuaikan dengan merek Anda dalam beberapa klik.
- Perilaku Cerdas: Tampilkan setelah gulir sebanyak X piksel, sembunyikan di bagian atas, tambahkan gulir halus, dan sesuaikan kecepatan gulir sesuai preferensi Anda.
- Siap untuk seluler secara bawaan: Tampil oke di ponsel dan tablet, dengan area sentuh yang mudah disentuh dan kinerja ringan.
- Beberapa posisi: kanan bawah, kiri bawah – pilih yang paling pas untuk tata letak Anda.
- Ramah Aksesibilitas: Label ARIA, keadaan fokus, dan navigasi dengan keyboard membantu semua orang menggunakannya dengan nyaman.
- Instalasi Tanpa Coding: Salin kode kecilnya, tempelkan di mana pun Anda inginkan – itu saja ceritanya.
- Ringan: Memuat cepat dan tetap tidak mengganggu, bahkan pada halaman dengan konten berat.
Cara Menambahkan Tombol Kembali ke Atas ke HTML
Ada dua jalur sederhana tergantung di mana Anda ingin tombolnya muncul.
Metode 1: Kembali ke Atas Secara Inline
Pakai ini jika Anda ingin tombolnya berada di dalam konten halaman Anda (misalnya setelah artikel panjang).
- Pilih templat: Buka editor Elfsight dan pilih tata letak yang Anda suka.
- Sesuaikan tampilannya: Atur ikon, warna, ukuran, lalu lihat bagaimana tampilannya.
- Salin kode instalasi: Klik “Tambahkan ke situs web secara gratis” untuk mendapatkan cuplikan kode Anda.
- Sisipkan ke HTML Anda: Tambahkan potongan kode di lokasi tombol yang Anda inginkan muncul dalam markup halaman Anda.
Metode 2: Kembali ke Atas Mengapung
Bagus untuk tombol lengket yang mengikuti pembaca saat mereka menggulir.
- Pilih tata letak melayang: Di editor, pilih gaya melayang.
- Sesuaikan posisi dan perilaku: Atur offset bawah/kanan, nilai tampil setelah gulir, dan gulir halus.
- Salin kode instalasi: Anda akan mendapatkan satu blok skrip kecil.
- Tempel sebelum penutup tag
</body>: Tombolnya akan muncul di setiap halaman tempat Anda menambahkan potongan kode.
Butuh bantuan? Kunjungi Pusat Bantuan kami untuk panduan langkah demi langkah yang rinci. Anda bisa berbagi ide di Daftar Keinginan dan melacak pembaruan di Riwayat Perubahan.