Membuat Back to Top Pada Halaman Web dengan CSS

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Saya Yakin anda sering menjumpai sebuah Fasilitas pada Halaman website yang memungkinkan kita kembali ke atas halaman. Pada Beberapa Website yang memiliki artikel yang cukup panjang khususnya akan memerlukan fasilitas Back to Top untuk memudahkan User guna menjelajahi halaman website tersebut. Dengan begitu, User hanya perlu sekali klik untuk kembali ke atas halaman website. 

Sebenarnya untuk membuat fasilitas Back to top pada halaman website tidaklah sulit karena hanya dengan CSS kita sudah bisa membuatnya. Disini saya berasumsi anda memiliki Sebuah Halaman Website yang memiliki artikel yang cukup panjang sehingga memungkinkan pengguna melakukan scroling halaman web anda ke bawah karena jika scroling tidak muncul pada browser, Back to Top ini tidak akan bisa bekerja dengan baik. Saya yakin anda paham maksud saya. :)

1. Buat Sebuah File CSS. Terserah mau dibuat file terpisah atau digabung dalam file HTML anda yang jelas isi file CSS tersebut adalah sebagai berikut
.toTop { border-bottom: solid 1px #a7ca63; margin: 25px 0 10px 0; }
.toTop a { float: right; margin-top: 8px; padding:10px; display:block; background-color:#ccc; text-decoration:none; margin-bottom:10px;}
2. Untuk Penggunaannya adalah sebagai berikut 
<div class='toTop'><a href='#'>Keatas</a></div>
Source code lengkap dapat anda Download disini. Selamat Mencoba. Happy Coding.
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.