Penjelasan mendetail tentang tiga cara untuk mencapai fungsi menggulir halaman ke atas dengan lancar

Baru-baru ini, akun publik perusahaan pengembang H5 memiliki fungsi untuk menggulir ke atas dengan mengklik ikon. Fungsi ini relatif sederhana untuk diterapkan. Cukup panggil window.scrollTo(0, 0) secara langsung dan selesaikan dalam satu baris kode. Tetapi sebagai singa pengepungan, bagaimana saya bisa memiliki persyaratan yang begitu rendah untuk diri saya sendiri, jadi saya menambahkan persyaratan bagi diri saya sendiri untuk menyadari fungsi menggulir halaman ke atas dengan lancar. Setelah meneliti dan meninjau dokumen, kami memiliki tiga opsi berikut.

Fungsionalitas tingkat tertinggi dapat dicapai hanya dengan menggunakan CSS. Kodenya adalah sebagai berikut:

 html { perilaku gulir: halus;}

Fungsi gaya ini adalah untuk menentukan perilaku pengguliran untuk elemen dengan bilah gulir, namun hanya berlaku ketika pengguna melakukan navigasi secara manual atau API pengguliran CSSOM memicu pengguliran, dan tidak memengaruhi pengguliran yang disebabkan oleh perilaku pengguna. Saat saya merayakannya, saya membuka bisakah saya menggunakan dan memeriksa kompatibilitasnya:

Sial, kita implementasikan saja dengan JS.

Kita semua tahu bahwa window.scrollTo(x, y) merealisasikan fungsi menggulir ke posisi tertentu pada halaman dengan meneruskan koordinat sumbu x dan y dalam dokumen. Faktanya, API ini juga dapat meneruskan opsi, yaitu objek. Nilai kiri sesuai dengan x pada koordinat, nilai atas sesuai dengan y pada koordinat, dan ada juga nilai perilaku, yang memungkinkan Anda. untuk menyesuaikan perilaku pengguliran. Kemudian kami menerapkan pengguliran seperti ini Ke atas:

 window.scrollTo({ kiri: 0, atas: 0, perilaku: 'halus'})

Baunya enak sekali, selesai. Beberapa hari kemudian, manajer produk mendatangi saya dengan membawa pedang sepanjang 5 meter dan mengatakan bahwa efek gulir di Safari aneh dan pemeriksaan fisik sangat buruk. Jadi saya diam-diam membuka dokumen MDN dan menggulir ke bawah:

Melihat gambar ini, meskipun browser API hampir didukung, opsi opsi langsung hang di Safari, jadi saya membuka stackoverflow lagi dan merangkum solusi utamanya.

Saya sering melihat requestAnimationFrame yang terkenal, tetapi saya tidak pernah sempat menggunakannya. Kali ini saya bisa mencobanya. Kita tahu bahwa fungsi requestAnimationFrame adalah memberi tahu browser untuk menjalankan fungsi panggilan balik yang masuk sebelum menggambar ulang berikutnya. Perilaku ini secara otomatis dilakukan oleh browser untuk Anda. Jadi kita memiliki kode berikut:

 const scrollToTop = () => { biarkan scrollTop = document.documentElement.scrollTo || document.body.scrollTop if (scrollTop > 0) { window.requestAnimationFrame(scrollTop) window.scrollTop(0, scrollTop - scrollTo / 8) }}

Selesai! ! ! Sempurna! ! ! Sambil bersemangat, saya mengaktifkan yang dapat saya gunakan untuk memeriksa kompatibilitas requestAnimationFrame:

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.