Cara membuat butang tatal ke atas yang tidak mengganggu

Pulangan yang mudah ke butang atas membantu pengguna dengan cepat kembali ke bahagian atas halaman tanpa sebarang usaha untuk menatal. Ciri ini amat berguna untuk halaman yang kaya dengan kandungan, laman web satu halaman (terutamanya apabila menggunakan menatal tanpa had), dan peranti mudah alih saiz skrin yang berbeza.

Butang ini biasanya digantung di sudut bawah laman web dan klik untuk kembali ke bahagian atas halaman. Buat dengan mudah dengan JavaScript, tetapi secara visual tidak mencolok sambil mengekalkan kawasan klik yang cukup besar. Mari kita lihat beberapa kaedah pelaksanaan, dari mudah ke kompleks.

Kaedah 1: Pelaksanaan Mudah

Pertama, gunakan JavaScript untuk memilih butang:

 var scrollTotOpbtn = document.getElementById ("ScrollTotOpbtn");

document.documentElement mengembalikan elemen akar dokumen dan digunakan untuk mendapatkan nilai offset. Simpan dalam pembolehubah yang dinamakan rootElement untuk memudahkan panggilan kod:

 var rootelement = document.documentElement;

Tambahkan pendengar acara klik ke butang:

 fungsi scrollTotop () {
  // kembali ke logik atas}

scrollTotOpbtn.AddeventListener ("Klik", ScrollTotop);

Dalam fungsi scrollToTop , gunakan kaedah scrollTo untuk menatal ke bahagian atas skrin:

 fungsi scrollTotop () {
  // kembali ke rootelement logik atas.scrollTo ({
    Atas: 0,
    Tingkah laku: "lancar"
  });
}

Sedikit menyesuaikan gaya:

 #scrolltotopbtn {
  latar belakang warna: hitam;
  Sempadan: Tiada;
  Radius sempadan: 50%;
  Warna: Putih;
  kursor: penunjuk;
  saiz font: 16px;
  ketinggian garis: 48px;
  lebar: 48px;
}

Letakkan butang di bahagian bawah halaman (seperti footer):

 <button id="scrollToTopBtn">☝️</button>

Kesannya adalah seperti berikut: (Rendering Kaedah 1 harus dipaparkan di sini)

Kaedah 2: Mengesan kedudukan tatal

Gunakan pendengar acara tatal untuk mengesan menatal:

 fungsi handlescroll () {
  // Pengendalian acara tatal}
document.addeventListener ("tatal", handlescroll);

Fungsi handleScroll akan dipanggil setiap kali skrol pengguna. Kita perlu mendapatkan jumlah piksel scrollable:

• scrollHeight mengembalikan ketinggian elemen, termasuk bahagian -bahagian yang tidak dapat dilihat kerana limpahan.
• clientHeight mengembalikan ketinggian (piksel) bahagian elemen yang kelihatan.

scrollHeight tolak clientHeight adalah jumlah piksel yang boleh ditatal secara menegak:

 var scrollTotal = rootelement.scrollHeight - rootelement.clientHeight;

Pembolehubah scrollTotal mewakili bilangan maksimum piksel yang boleh ditatal secara menegak. Bahagikan jumlah tatal dengan jumlah piksel bergulir untuk mendapatkan nisbah antara 0 dan 1. Dengan skala ini, mudah untuk togol butang untuk menunjukkan/menyembunyikan.

Sebagai contoh, butang kembali ke atas dipaparkan apabila skrol pengguna hingga 80% daripada ketinggian jumlah halaman (nisbahnya ialah 0.80). 80% adalah nilai sewenang -wenangnya, semakin dekat dengan 1, semakin banyak pengguna perlu menatal untuk melihat butang tersebut.

Kod JavaScript adalah seperti berikut:

 var rootelement = document.documentElement;

fungsi handlescroll () {
  // Pemprosesan acara tatal var scrollTotal = rootelement.scrollHeight - rootelement.clientHeight;
  jika ((rootelement.scrollTop / scrollTotal)> 0.80) {
    // tunjukkan butang scrollTotopbtn.classlist.add ("showbtn");
  } else {
    // Sembunyikan butang scrollTotopbtn.classlist.remove ("showbtn");
  }
}

document.addeventListener ("tatal", handlescroll);

Sesetengah CSS diperlukan untuk mencari butang dengan betul:

 .ScrollTotopbtn {
  /* Gaya biasa yang sama seperti sebelum*/

  /* Letakkan di sudut kanan bawah*/
  Kedudukan: Tetap;
  Bawah: 30px;
  Kanan: 30px;

  /* Tinggal di atas semua elemen lain*/
  Z-indeks: 100;

  /* Gunakan kelegapan untuk menyembunyikan*/
  Kelegapan: 0;

  /* Tambah kesan terjemahan*/
  Transform: Translate (100px);

  /* Tambah kesan peralihan*/
  Peralihan: Semua 0.5s mudah;
}

.showbtn {
  Kelegapan: 1;
  Transform: Translate (0);
}

Dengan cara ini, butang muncul apabila pengguna menatal hingga 80% halaman dan menyembunyikan apabila ia lebih tinggi daripada itu.

Ini kelihatan seperti pilihan yang baik, dan menambah pendengar acara juga mudah. Tetapi overhead prestasi boleh menjadi penting kerana anda sentiasa menyemak kedudukan tatal semasa.

Ada cara lain untuk menyelesaikan masalah ini ...

Kaedah 3: Pemerhati Persimpangan

API Observer Persimpangan adalah penyelesaian yang hebat. Ini adalah API penyemak imbas yang baru yang membolehkan pemaju menyerahkan sebahagian besar tugas kepada penyemak imbas untuk prestasi yang lebih dioptimumkan. Travis Almand memberikan penjelasan yang mendalam tentang bagaimana ia berfungsi. Takrif MDN adalah seperti berikut:

API Observer Persimpangan menyediakan kaedah untuk secara asynchronously memerhatikan perubahan silang elemen sasaran dengan unsur nenek moyangnya atau tetingkap dokumen peringkat atas.

Sangat pandai! Ini bermakna butang boleh digunakan sebagai elemen sasaran kami:

 // Pilih elemen untuk diposisikan var sasaran = document.QuerySelector ("footer");

Kemudian tulis fungsi panggil balik yang melakukan operasi apabila elemen "bersilang" dengan tingkap (iaitu, memasuki bidang pandangan). Fungsi panggil balik menerima pelbagai penyertaan sebagai hujah.

 fungsi panggilan balik (penyertaan, pemerhati) {
  // Fungsi panggil balik akan mengembalikan pelbagai penyertaan, walaupun anda hanya memerhatikan satu entri item.foreach (entry => {
    jika (entry.isintersecting) {
      // tunjukkan butang scrolltotopbtn.classlist.add ('showbtn');
    } else {
      // Sembunyikan butang scrollTotopbtn.classlist.remove ('showbtn');
    }
  });
}

Kami perlu membuat contoh baru IntersectionObserver dan lulus dalam fungsi panggil balik yang kami tulis:

 Let Observer = New IntersectionObserver (Callback);

Akhirnya, kami memberitahu pemerhati untuk mula memerhatikan persimpangan elemen sasaran yang dipilih di atas dengan tingkap:

 Observer.observe (sasaran);

Bagaimana untuk mencapai tatal lancar?

Pasti! Malah, Chris menunjukkan kepada kami cara melaksanakannya menggunakan CSS pada tahun 2019:

 <a href="https://www.php.cn/link/2e6d941e3bc2dbd3f122040f056b6718">Lompat ke bahagian atas halaman</a>

 html {
  Tingkah laku tatal: licin;
}

Terdapat beberapa kehalusan di sini, seperti ciri peningkatan aksesibiliti yang juga diperkenalkan oleh Chris dalam artikel tersebut. Kuncinya ialah CSS mendapat ciri -ciri baru yang dapat menyelesaikan tugas yang biasa kita lakukan dengan JavaScript.

Itu sahaja! Mari kita mulakan dengan idea yang sangat mudah. Kami meningkatkannya dengan menunjukkan dan menyembunyikan butang berdasarkan kedudukan menatal pengguna. Kami kemudian meningkatkan prestasi dengan melaksanakan API Observer Persimpangan dan bukannya memantau kedudukan tatal semasa. Akhirnya, kita melihat cara menggunakan CSS untuk mencapai tatal yang lancar. Semua dalam semua, kami mendapat kembali ke butang atas yang mudah dilihat dan digunakan tanpa menyekat elemen lain pada halaman.

Atas ialah kandungan terperinci Cara membuat butang tatal ke atas yang tidak mengganggu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!