Cara Membuat Tombol Back To Top Pada HTML

Cara Membuat Tombol Back To Top Pada HTML

Padi tutorial kali saya akan memberikan tutorial cara membuat tombol back to top pada HTML dengan CSS. Sebenarnya untuk membuat tombol back to top ini hanya menggunakan HTML saja sudah bisa, namun supaya tampilannya lebih bagus diperlukan tambahan CSS. Supaya lebih mudah pada tutorial ini akan dibagi menjadi 2 poin yaitu membuat tombol back to top hanya dengan HTML, dan poin berikutnya paduan antara HTML dan CSS.

Cara Membuat Tombol Back To Top HTML

Langsung saja silakan tulis contoh kode dibawah ini pada code editor kamu, contohnya Notepad++ atau sebagainya.

Setelah kode diatas selesai ditulis silakan simpan dengan nama terserah kamu, namun yang paling penting adalah format file tersebut harus .html. Pada contoh ini saya menyimpanya dengan nama tombol.html.

Contoh File Disimpan Dengan Format HTML

Selanjutnya silakan buka file yang sudah disimpan pada browser kesayangan kamu, disini saya membukanya di browser Google Chrome. Setelah berhasil terbuka selanjutnya silakan scroll kebawah dan klik tombol (link) Back to top, maka setelah tombol tersebut kamu klik halaman akan kembali ke atas (sesuai pada posisis letak <a name=”top”></a> berada). Untuk lebih jelasnya silakan lihat video berikut:

Sebagai catatan supaya terlihat efek scoll, konten yang tampil harus banyak hingga halaman yang tampil bisa di scol. Selain itu sebenarnya kamu tidak memerlukan tag <a name=”top”></a>, dan hanya memerlukan tag <a href=”#top”>Back to top</a> sebenarnya sudah berfungsi. Namun tag <a name=”top”></a> ditujukan untuk mengubah dimana posisi scroll harus dituju, misalnya di awal artikel. Sedangkan jika tidak menggunakan tag tersebut maka yang akan ditujua ke halaman paling atas.

Cara Membuat Tombol Back To Top HTML Dan CSS

Pada poin ini inti kodenya masih seperti poin pertama, namun kita tambahkan beberapa tag HTML dan CSS supaya tampilannya lebih menarik. Terutama supaya tombol back to top bisa mengapung dan selalu berada di posisi samping kanan bawah. Oke langsung saja silakan tulis kodenya seperti contoh kode dibawah:

Setelah selesai menulis kode diatas, selanjutnya silakan buka di browser kamu. Maka hasilnya akan seperti contoh video ini:

Apabila kamu ingin mengubah tampilan tombol diatas silakan ubah pada kode CSS, yaitu yang terdapat dalam tag style.

Penjelasan Kode:

Pada penjelasan kode diatas mungkin yang perlu dijelaskan hanya dibagian kode CSS, dan berikut adalah penjelasannya.

  • #BtnTop yaitu sebuah selector CSS, selector ini akan memilih id pada tag HTML yang memiliki value BtnTop (yaitu pada baris nomor 43.
  • position: fixed; yaitu berfungsi untuk membuat object selalu berada pada posisinya walau halaman telah discroll.
  • float: right; ini akan membuat object selalu mengapung di sebelah kanan. Dalam contoh ini jika tombol ingin berada di sebelah kiri maka silakan ganti value right menjadi left.
  • bottom: 10px; yaitu untuk mengatur jarak tombol dengan bagian bawah, yaitu sebesar 10px. Jika ingin merubah jarah tombol tersebut dengan bagian bawah silakan ubah value ini, misalnya 5px, 15px, 18px, dan sebagainya.
  • right: 5%; yaitu mengatur jarak kanan dari sebuah tombol, pada contoh ini menggunakan value 5% maksudnya jaraknya adalah 5% dari ukuran lebar browser. Kamu juga bisa menggunakan ukuran persentase lainnya atau dengan satuan px, misalnya 8%, 10%, 13%, 10px, 12px, dan sebagainya.
  • background-color: #3cb163; ini digunakan untuk mengatur warna background, dalam contoh ini untuk mengatur background (warna) dari sebuah tombol. Kamu juga dapat mengubah kode warna #3cb163 dengan kode warna lainnya atau menggunakan nama warna dalam bahasa inggris. Untuk info lebih jelas tentang warna ini silakan lihat tulisan mengatur background color.
  • border: 1px solid #a9e0bc; digunakan untuk membuat border (garis batas) pada suatu elemen, pada contoh ini untuk mengatur border dari sebuah tombol. Pada contoh kode tersebut property border memiliki 3 buah value yaitu 1px solid #a9e0bc. 1px digunakan untuk mengatur lebar border, solid digunakan untuk jenis border (bisa double, dashed, dll), dan #a9e0bc digunakan untuk mengatur warna border. Untuk lebih jelasnya tentang border ini silakan simak di cara membuat border di css.
  • border-radius: 4px; yaitu digunakan untuk mengatur radius border (sudut pada border) supaya sudut tidak siku (lancip).
  • box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); digunakan untuk mengatur bayangan, pada contoh ini bayangan sebuah tombol. Pada contoh tersebut memiliki 4 buah value yaitu 2px 2px 5px rgba(0, 0, 0, 0.6). Value pertama (2px) yang fungsinya untuk mengatur jarak bayangan kiri kanan. Value kedua (2px) yang berfungsi untuk mengatur jarak bayangan atas bawah. Value ketiga (2px) yang berfungsi untuk mengatur buram (blur) bayangan. Value keempat (rgba(0, 0, 0, 0.6)) yang berfungsi untuk mengatur warna, bisa diisi dengan nama warna dalam bahasa inggris atau kode warna (hexa, rgb, atau rgba color).
  • #BtnTop > a digunakan untuk memilih tag a (link) yang berada didalam id BtnTop. Dalam contoh ini yaitu tag link yang berada didalam tombol.
  • color: white; diginakan untuk mengatur warna tulisan, dalam contoh ini warna tulisan yang ada di dalam tombol.
  • text-decoration: none; digunakan untuk menghilangkan dekorasi dari text, dalam contoh ini untuk menghilangkan garis bawah yang ada di link (dalam tombol).
  • display: inline-block; digunakan untuk mengatur elemen HTML menjadi display inline block, dalam contoh ini supaya tag a bisa diatur padding (jarak diantara konten dan border).
  • padding: 2px 10px 2px 10px; digunakan untuk mengatur jarak diantara konten dan border. Pada contoh ini terdapat empat value yaitu : value pertama dan ketiga 2px untuk mengatur jarak atas bawah, dan value kedua dan empat 10px untuk mengatur jarak kiri kanan. Dalam contoh ini padding mempengaruhi besarnya tombol, jika ingin merubah ukuran tombol silakan ubah value ini.
  • #BtnTop:hover yaitu sebuah selector css yang memilih id BtnTop, dan hover digunakan untuk mengatur perubahan ketika mouse berada diatas element dengan id tersebut. Pada contoh ini untuk mengubah background-color dan border.

Demikian untuk tutorial cara membuat tombol back to top pada HTML, apabila kamu masih belum paham dengan penjelasan diatas maka sebaiknya kamu pelajari tentang HTML dasar dan CSS dasar terlebih dahulu. Dan apabila kamu memiliki pertanyaan seputar tutorial ini silakan tanyakan pada kolom komentar dibawah.


Kolom Komentar

Related Post