Melaksanakan butang kembali ke atas berdasarkan kemahiran Javascript_javascript

Apabila halaman web mempunyai terlalu banyak kandungan, data akan dipaparkan dalam skrin berpecah Jika terdapat banyak skrin, data yang diakses oleh pengguna telah sampai ke bahagian bawah halaman dan ia akan mengambil sedikit masa untuk kembali ke halaman. atas. Ini mungkin memudaratkan pengalaman pengguna. Oleh itu, halaman web dengan banyak data halaman kini akan menggunakan butang "Kembali ke Atas" untuk melompat ke bahagian atas halaman web dengan cepat.
Sekarang mari kita laksanakan fungsi sedemikian.

Kami tidak akan menulis sebarang data pada halaman ini, cuma tambahkan teg sebagai butang untuk kembali ke bahagian atas dan berikannya nama kelas: atas.

<a href="#" class="top">顶部</a>

Kemudian tetapkan helaian gayanya:

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

Di sini badan ditetapkan pada ketinggian 3000, terutamanya untuk memberikan halaman kesan tatal biasanya diletakkan lebih rendah sedikit di sebelah kanan halaman web.

Kami juga perlu menganalisis bahawa apabila halaman web yang dilawati pengguna berada di bahagian atas halaman, butang ini pasti tidak akan dipaparkan, jadi kami menggunakan keterlihatan di sini untuk mengawal sama ada butang itu dipaparkan atau tidak.

Antara mukanya sangat mudah, mari kita uruskan dahulu. Mari kita analisa pelaksanaan JS.

Pertama sekali, butang ini mempunyai kesan pada keseluruhan halaman web, jadi pemantauan acara tatal perlu ditetapkan pada keseluruhan tetingkap. Oleh itu, kami menetapkan acara onscroll untuk tetingkap

window.onscroll = function (e) {...}

Dalam acara ini kami mengawal kedudukan atas dan bawah butang kembali ke atas, dan sama ada untuk memaparkannya Mula-mula, lengkapkan kawalan kedudukan atas dan bawah.

Untuk mengawal kedudukan atas dan bawah, kami mesti mengira ketinggian tatal Atas dan ketinggian paparan skrin tunggal halaman web Apabila pengguna memasuki halaman, kami meletakkan butang ini di kedudukan tengah kanan halaman secara lalai. Pengiraan pada masa ini ialah:

var n_half_height = window.screen.height / 2;

Tetapkan nilai ini pada atribut atas butang.

Kemudian jika pengguna menatal, kedudukan pasti akan kekal tidak berubah, dan pengiraan pada masa ini sepatutnya

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

Ini ialah objek e yang merupakan peristiwa parameter dalam onsroll Di sini saya menggunakan Google Chrome pelayar lain belum diuji Jika keserasian diperlukan, anda boleh menanganinya.
Setiap tatal mesti mengira ketinggiannya, jadi ini harus diletakkan dalam acara onscroll Kemudian, tetapkan nilai ini pada atribut atas butang

Sudah tentu, jangan lupa satu perkara, iaitu, apabila scrollTop adalah 0, butang itu tidak perlu dipaparkan Apabila ia lebih besar daripada 0, butang itu mesti dipaparkan atribut keterlihatan untuk mengawalnya. Dengan cara ini kod selesai Kod lengkap JavaScript

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

Paparan kesan akhir:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.