Ketika website kita memiliki halaman yang panjang, lebih baik menawarkan tombol yang dapat menggulir kembali ke atas halaman, ketika pengguna ingin kembali ke atas halaman, gerakannya lebih ramah.
Implementasi yang lebih baik adalah menampilkan tombol yang ditetapkan ke lokasi tertentu (kanan bawah) saat pengguna menggulir ke bawah dalam jumlah yang panjang
Kebanyakan orang akan menggunakan JavaScript untuk mengimplementasikan fitur ini
- Buat tombol yang diperbaiki ke lokasi tertentu, sembunyikan secara default;
- Dengarkan acara gulir halaman, berdasarkan posisi halaman untuk menampilkan tombol;
- Dengarkan acara klik tombol, ketika diklik, gulir halaman ke atas
Tidaklah sulit untuk menerapkan pengguliran ke bagian atas halaman. Namun kita bisa melakukannya dengan cara yang lebih sederhana yaitu hanya dengan menggunakan CSS
Tapi tanpa JavaScript, Bagaimana kita bisa menggulir halaman?
Terapkan gulir ke atasSebagai pengembang front-end, Anda seharusnya menggunakan tag <a> untuk melompat ke halaman lain. Tetapi beberapa orang mungkin tidak mengetahui bahwa tag a juga dapat melompat ke elemen di halaman yang sama. Atribut href dari <a>tag mendukung lima bentuk nilai (dari )
1. URL berbasis HTTP
2. Bagian halaman dengan URL fragmen
3. Potongan file media dengan fragmen media
4. Nomor telepon dengan tel: URL
5. Alamat email dengan mailto: URL
, Anda dapat menggunakan href="#top" atau href="#" untuk menautkan ke bagian atas halaman saat ini
// page will scroll to top, when you click it<a href="#top"> scroll to top </a>
Ya, mudah untuk menggulir ke atas dengan menggunakan tag html _______________
Tampilkan tombol gulir ke atasJika tombol dipasang di bagian bawah, kita dapat menggunakan position:fixed untuk melakukan itu. Tapi pengalaman ini tidak terlalu bagus, halaman awalnya ada di atas, dan tombol ini tidak diperlukan. Jadi bagaimana kita bisa membuat tombol ditampilkan ketika pengguna menggulir ke bawah dalam jumlah yang panjang
Awalnya, tombol disembunyikan, dan saat pengguna menggulir halaman, tombol akan tetap berada di satu posisi kanan bawah. Ini terlihat sangat mirip dengan perilaku <a>0
Saat halaman dimuat, kita perlu memperbaiki tombol ini di bagian bawah layar tempat menyembunyikan tombol. Saat pengguna menggulir halaman, itu diperbaiki di kanan bawah dengan bantuan <a>0
Saat pengguna menggulir di bagian atas halaman atau memuat pertama kali, kita dapat menyembunyikan tombol dengan menggunakan elemen semu
Contoh 2. Dalam contoh ini gunakan auto sebagai pengganti overflow-x. tersembunyi; . mobil; .
html
<!DOCTYPE html>
<html>
<head>
<<0>
<2<3
<4<5
<2<7
<2<22
<4<24
<4<26
<4html5
<4html7
<4html9
<4<34
<4>5
<2<7
>9<0>
>9head>
< 8>
<<2>
<<6<7<6>
<head2 <64
head5
head7
head_9
>1
>3
>5
>7
>_9
1
3
5
________20______7
>9head2>
>9<2>
>9 8>
>9html<02
Keluaran.
CSS adalah fondasi halaman web, dan digunakan untuk pengembangan halaman web dengan gaya situs web dan aplikasi web. Anda dapat mempelajari CSS dari bawah ke atas dengan mengikuti Tutorial CSS dan Contoh CSS ini