Cara membuat tombol kembali ke atas html
Home » Koding » Html » Cara Membuat Tombol Back To Top di HTML dengan Mudah Show PANDUAN.ID – Kali ini membagikan tentang cara membuat tombol back to top atau kembali keatas di HTML dengan mudah. Tombol back to top merupakan salah satu bagian penting dari setiap website, jika sebuah web tidak memiliki tombol tersebut sangat fatal sekali. Dalam membuat tombol Back To Top menggunakan Javascript, CSS dan HTML. Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini. Daftar Isi
Berikut ini langkah-langkah membuat tombol back top top di HTML dengan mudah: 1. Tambahkan kode HTMLTambahkan kode HTML ini tepat dibawah kode 2. Tambahkan kode CSSTambahkan kode CSS tepat di bawah atau diatas
3. Tambahkan kode JavascriptTambahkan kode Javascript dibawah kode
Selesai silahkan simpan dan cek pasti tombol Back To Top sudah muncul di website Anda. Silahkan di edit kodenya sesuai keinginan Anda. Bagaimana sangat mudahkan dalam membuat back to top dengan HTML? Kunjungi terus Panduan.id untuk tutorial koding lainnya. Akhir KataItulah cara membuat tombol back to top di HTML dengan mudah yang bisa Anda praktekan secara langsung. Semoga Bermanfaat. sumber kode: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp Hola, saya Nawang sangat menyukai di dunia blogging, jadi saya akan membagikan tips trik terbaru seputar Blogger, Wordpress dan lainnya. Di bawah ini kita akan mempelajari cara membuat tombol “kembali ke atas”” dengan menggunakan CSS dan Javascript. Scroll back to top button atau tombol “kembali ke atas” ini biasanya digunakan ketika website memiliki panjang teks melebihi panjang layar untuk kembali ke atas
Cara Membuat Scroll To Top ButtonLangkah 1) Tambahkan HTML: Langkah 2) Tambahkan CSS: #myBtn { display: none; /* Disembunyikan secara default */ position: fixed; /* Posisi Fixed/sticky position */ bottom: 20px; /* Tempatkan button di bagian bawah halaman */ right: 30px; /* Tempatkan button 30px dari kanan */ z-index: 99; /* Pastikan tidak tumpang tindih */ border: none; /* Hapus borders */ outline: none; /* Hapus outline */ background-color: red; /* Atur warna background */ color: white; /* Warna teks */ cursor: pointer; /* Tambahkan penunjuk mouse saat mengarahkan kursor */ padding: 15px; /* Some padding */ border-radius: 10px; /* Sudut membulat */ font-size: 18px; /* Tingkatkan ukuran font */ } #myBtn:hover { background-color: #555; /* Tambahkan background abu-abu tua saat mengarahkan kursor */ } Langkah 3) Tambahkan JavaScript: //DApatkan buttonnya: mybutton = document.getElementById("myBtn"); // Saat pengguna melakukan scrolling ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // Saat pengguna mengklik tombol, scroll kembali ke bagian atas dokumen function topFunction() { document.body.scrollTop = 0; // Untuk Safari document.documentElement.scrollTop = 0; // Untuk Chrome, Firefox, IE dan Opera } |