Kita akan memanfaatkan property yang bernama
scroll-behavior
. Property CSS ini memungkinkan kita untuk menentukan perilaku gulir (scroll) ketika link untuk "melompat" di-klik.Syntax:
.class {
scroll-behavior: [ auto | smooth ];
}
scroll-behavior
menerima dua jenis value yang pada dasarnya bisa mengaktifkan dan mematikan fitur smooth scroll.auto
(default).
Ini akan memberikan efek lompatan kasar. Tidak akan ada animasi dengan efek bergulir lambat alias tidak smooth.smooth
.
Sesuai namanya, value ini akan memberikan efek gerakan transisi animasi halus / smooth ketika kegiatan scroll berlangsung.
Sampai saat ini baru ada 2 versi yang tersedia. Pilih yang paling sesuai dengan gaya kamu.
1. Gaya Satu
Tombol back to top akan tetap terlihat setiap saat. Tidak seperti versi JS yang bisa dimunculkan setelah halaman bergulir setinggi beberapa pixel.Tambahkan dulu kode utama yang akan membuat back to top smooth scroll dengan CSS ini berhasil. Simpan "DI BAWAH / SETELAH"
<style>
./* Back to Top Pure CSS by igniel.com */
html {scroll-behavior:smooth;}
.ignielToTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; transition:all .5s; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop:hover {background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
Setelah itu buat sebuah elemen hyperlink
<a>
baru yang berfungsi sebagai tombol back to top. Tulis "SEBELUM / DI ATAS" </body>
.<a href="#" class="ignielToTop"></a>
Simpan template dan lihat hasilnya. Live demo bisa cek ke Codepen.
2. Gaya Dua
Tombol bisa diberi delay (jeda waktu) untuk muncul. Misalnya baru keluar setelah 3 detik. Plus tombolnya akan ikut bergerak ke atas dan akan muncul lagi ketika pengunjung melakukan klik / ketuk di halaman.CSS:
/* Back to Top Pure CSS With Delay by igniel.com */
html {scroll-behavior:smooth;}
.ignielToTop {width:50px; height:50px; position:fixed; bottom:50px; right: 50px; z-index:99; cursor:pointer; border-radius:100px; transition:all .5s ease; opacity:0; visibility:hidden; animation:ignielDelay .75s 3s forwards; -moz-animation:ignielDelay .75s 3s forwards; -webkit-animation:ignielDelay .75s 3s forwards; -o-animation:ignielDelay .75s 3s forwards; background:#008c5f url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop:hover {background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}
.ignielToTop:active, .ignielToTop:focus {bottom:100%;}
@keyframes ignielDelay {
to {opacity:1; visibility:visible;}
}
@-webkit-keyframes ignielDelay {
to {opacity:1; visibility:visible;}
}
@-moz-keyframes ignielDelay {
to {opacity:1; visibility:visible;}
}
Untuk mengubah detik, ganti pada value 3s
yang telah ditandai.HTML:
Masih sama, simpan "SEBELUM / DI ATAS"
</body>
.<a href="#" class="ignielToTop"></a>
Kekurangan
Property CSSscroll-behavior
mungkin tidak bekerja pada beberapa browser versi lama. Tapi melihat perkembangan website yang sangat pesat, rasanya semua orang pasti sudah meng-upgrade browsernya ke versi terbaru. Jadi cara ini akan bekerja untuk hampir 100% pengunjung.Sekian tutorial lengkap tentang cara membuat tombol back to top smootch scroll animasi CSS. Semoga bisa menambah wawasan kamu tentang trik-trik menakjubkan yang bisa dilakukan hanya dengan CSS.
Kalau dikasih durasi khusus seperti CSS transisi bisa nggak ya mbak? Bagus juga ini…
BalasHapusIde bagus mas. Udah saya update biar ada durasi delay & munculnya kaya pakai efek fadeIn.
Hapusmau tanya bang ,
BalasHapusitu gambar kalo di klik gerak , gimana cara nya bang ..
bagi link tutor nya
thx bang
Kak, dipunyaku demo yang ke dua kok gak work ya?
BalasHapusSertakan alamat blog biar bisa dicek.
Hapuswah udah saya ganti sama satunya yang smooth scroll yang diblog ini juga..
BalasHapussoalnya yang demo kedua di codepennya gak mau scroll keatas padahal udah diklik
makasih bang tutorialnya
BalasHapusCara merubah posisinya supaya lebih mengambang gimana mas?
BalasHapusteh....yg gaya 2 ga work, malah tombolnya doang yang kabur ke atas, pagenya diem aj...klo yg gaya 1 normal,,,jd aku ijin pake di blog https://monstutor.blogspot.com pengennya gaya 2 sih kayanya lebih bagus soalnya kalo no 1 tombolnya static.
BalasHapusterima kasih banyak buat agan yah
BalasHapus