Cara Membuat Fungsi Back To Top Dengan CSS3

Hai, jumpa lagi dengan saya, pada tutorial kali ini saya akan bagikan untuk kalian tutorial mengenai Cara Membuat Fungsi Back To Top Dengan CSS3. Nah, fungsi back to top adalah tidak lain untuk memudahkan kita kembali ke halaman atas suatu web, tanpa harus scroll dengan mouse, berikut ini adalah langkah langkah nya.

Baik langsung saja, silahkan buka teks editor kalian, kemudian kalian bisa membuat konten berupa paragraf seperti berikut.

<button class="back-to-top">👆⬆️ Go up ⬆️👆</button>
<div class="main">
  <div class="container">
    <h1>Back To Top</h1>
    <p>Silahkan Isikan beberapa baris paragraf supaya bisa scroll kebawah</p>
  </div>
</div>

Setelah itu, kita buat fungsi scroll dengan kode CSS3 berikut ini.

/* The back to top magic */
.back-to-top:active + .main {
  position: fixed;
}

body {
  margin: 0;
  padding: 0;
}

.back-to-top {
  background: #ddd;
  border: 0;
  border-radius: 3px;
  text-transform: uppercase;
  color: #333;
  padding: 15px;
  position: fixed;
  font-size: 13px;
  top: 25px;
  left: 25px;
}

.container {
  width: 50%;
  font-family: sans-serif;
  margin: auto;
}

Kalo sudah semua, simpan terlebih dahulu, kemudian coba jalankan di browser dan lihat hasilnya, silahkan kalian tinggal klik saja tombol back to top. Selesai.

Cukup mudah bukan ? baik sampai disini tutorial mengenai Cara Membuat Fungsi Back To Top Dengan CSS3, semoga bermanfaat. Sampai ketemu di tutorial selanjutnya.