Bagaimana menulis
【1】 titik jangkar
Menggunakan Anchor Links adalah pengembalian sederhana ke atas. Implementasi ini terutama menempatkan tautan jangkar dengan nama yang ditentukan di bagian atas halaman, dan kemudian menempatkan tautan untuk kembali ke jangkar di bawah halaman. Pengguna mengklik tautan untuk kembali ke posisi teratas di mana jangkar berada.
[Catatan] Informasi terperinci tentang titik jangkar akan dipindahkan ke sini
<body style = "Height: 2000px;"> <div id = "Topanchor"> </div> <a href = "#topanchor" style = "posisi: diperbaiki; kanan: 0; bawah: 0"> kembali ke atas </a> </body>
【2】 Scrolltop
Properti Scrolltop menunjukkan jumlah piksel yang tersembunyi di atas area konten. Ketika elemen tidak digulir, nilai scrolltop adalah 0. Jika elemen digulir secara vertikal, nilai scrolltop lebih besar dari 0, dan menunjukkan lebar piksel dari konten yang tidak terlihat di atas elemen.
Karena scrolltop dapat ditulis, scrolltop dapat digunakan untuk mencapai fungsi kembali ke atas
[Catatan] Rincian masalah kompatibilitas scrolltop pada halaman dipindahkan ke sini
<body style = "Tinggi: 2000px;"> <tombol id = "test" style = "Posisi: fixed; kanan: 0; bawah: 0"> kembali ke atas </button> <script> test.onClick = function () {document.body.【3】 scrollto ()
Metode ScrollTo (X, Y) menggulir dokumen yang ditampilkan di jendela saat ini, sehingga titik -titik yang ditentukan oleh koordinat X dan Y dalam dokumen terletak di sudut kiri atas area tampilan.
Setel Scrollto (0,0) untuk mencapai efek kembali ke atas
<body style = "Height: 2000px;"> <tombol id = "test" style = "Posisi: fixed; kanan: 0; bawah: 0"> kembali ke atas </button> <script> test.onClick = function () {scrollto (0,0);} </script> </cripk【4】 scrollby ()
Metode Scrollby (X, Y) menggulir dokumen yang ditampilkan di jendela saat ini, x dan y Tentukan jumlah relatif gulir
Cukup gunakan panjang gulir halaman saat ini sebagai parameter dan gulir secara terbalik, Anda dapat mencapai efek kembali ke atas.
<body style = "Tinggi: 2000px;"> <tombol id = "test" style = "Posisi: fixed; kanan: 0; bawah: 0"> kembali ke atas </button> <script> test.onClick = function () {var top = document.body.scrolltoptop || document.documentelement.scrolltopscrollby (0, -top);} </script> </body>【5】 scrollintoview ()
Element.scrollintoview Metode menggulir elemen saat ini dan memasuki area yang terlihat dari browser.
Metode ini dapat menerima nilai boolean sebagai parameter. Jika benar, itu berarti bahwa bagian atas elemen disejajarkan dengan bagian atas bagian yang terlihat dari area saat ini (asalkan area saat ini dapat digulir); Jika salah, itu berarti bahwa bagian bawah elemen disejajarkan dengan ekor bagian yang terlihat dari area saat ini (asalkan area saat ini dapat digulir). Jika parameter ini tidak disediakan, standarnya benar
Prinsip menggunakan metode ini mirip dengan prinsip menggunakan titik jangkar. Atur elemen target di bagian atas halaman. Saat halaman menggulir, elemen target digulir di luar area halaman. Klik tombol Kembali ke Top untuk kembali ke posisi asli, dan raih efek yang diharapkan.
<body style = "Height: 2000px;"> <div id = "target"> </div> <button id = "test" style = "Posisi: fixed; kanan: 0; bawah: 0"> kembali ke atas </button> <script> test.onClick = function () {target.scrollintoview ();} </script> </body>Ditingkatkan
Berikut ini meningkatkan fungsi kembali ke atas
【1】 Tampilkan peningkatan
Gunakan CSS untuk menggambar dan mengubah "kembali ke atas" menjadi grafik visual (jika kompatibel dengan IE8-browser, gantinya gunakan gambar)
Gunakan CSS Pseudo-Element dan Efek Pseudo-Hover. Ketika mouse bergerak ke elemen, teks kembali ke atas ditampilkan, dan tidak muncul saat dipindahkan.
<tyle> .box {position: fixed; kanan: 10px; bawah: 10px; tinggi: 30px; Lebar: 50px; Teks-Align: tengah; padding-top: 20px; Latar Belakang-Color: LightBlue; Border-Radius: 20%; overflow: Tersembunyi;}. Kotak: Hover: Sebelum {Top: 50%}. Kotak: Hover .box-in {visibilitas: tersembunyi;}. Kotak: Sebelum {Posisi: Absolute; Top: -50%; 50%; Transform: Translate: -50%,-50%); 40px; warna: peru; font-weight: bold;} .box-in {visibilitas: visible; display: inline-block; tinggi: 20px; lebar: 20px; perbatasan: 3px solid black; border-color: white transparan white; transform: 2000; ID = "BOX"> <DIV> </SIV> </SEV> </BODY>【2】 Peningkatan Animasi
Untuk menambahkan animasi ke atas, bilah gulir bergulir kembali ke atas dengan kecepatan tertentu
Ada dua jenis animasi: satu adalah animasi CSS, yang membutuhkan perubahan gaya dan transisi; Yang lainnya adalah JavaScript Animation, yang menggunakan timer untuk mengimplementasikannya.
Dalam 5 Implementasi di atas, Metode Scrolltop, ScrollTo () dan Scrollby () dapat menambahkan animasi, dan karena tidak ada perubahan gaya, hanya animasi JavaScript yang dapat ditambahkan
Pengatur waktu dapat digunakan, setInterval, setTimeout dan requestanimationFrame. Berikut ini adalah dengan menggunakan Timer RequestanimationFrame yang berkinerja terbaik untuk mengimplementasikannya.
[Catatan] IE9-browser tidak mendukung metode ini, Anda dapat menggunakan setTimeout untuk kompatibilitas
1. Tambahkan efek animasi scrolltop
Menggunakan timer, kurangi nilai scrolltop hingga 50 setiap kali sampai dikurangi menjadi 0, dan animasi selesai
<script> var timer = null; box.onClick = function () {contancanimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.scrollement. 50; timer = requestAnimationFrame (fn);} else {cancelanimationframe (timer);}});} </skrip>2. Tambahkan efek animasi scrollto ()
Dapatkan parameter y di scrollto (x, y) melalui nilai scrolltop, kurangi 50 setiap kali sampai dikurangi menjadi 0, dan animasi selesai
<script> var timer = null; box.onClick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (oTop> 0) {scrollto (0), oTop-oProlltop; requestAnimationFrame (fn);} else {cancelAnimationFrame (timer);}});} </script>3. Tambahkan efek animasi scrollby ()
Atur parameter y di scrollby (x, y) ke -50 hingga scrolltop adalah 0, lalu rollback berhenti
<script> var timer = null; box.onClick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; if (oTop> 0) {scrollby (0) (0); requestAnimationFrame (fn);} else {cancelAnimationFrame (timer);}});} </script>menyelesaikan
Karena Metode Scrolltop, Scrollby () dan ScrollTo () semuanya menggunakan apakah nilai scrolltop dikurangi menjadi 0 sebagai referensi untuk berhenti animasi, dan prinsip dan implementasi ketiga animasi pada dasarnya serupa, dan kinerjanya juga serupa. Akhirnya, efek peningkatan animasi dicapai dengan atribut scrolltop yang paling umum digunakan
Tentu saja, jika Anda berpikir kecepatan 50 tidak cocok, Anda dapat menyesuaikannya sesuai dengan situasi yang sebenarnya
<tyle> .box {position: fixed; kanan: 10px; bawah: 10px; tinggi: 30px; Lebar: 50px; Teks-Align: tengah; padding-top: 20px; Latar Belakang-Color: LightBlue; Border-Radius: 20%; overflow: Tersembunyi;}. Kotak: Hover: Sebelum {Top: 50%}. Kotak: Hover .box-in {visibilitas: tersembunyi;}. Kotak: Sebelum {Posisi: Absolute; Top: -50%; 50%; Transform: Translate: -50%,-50%); 40px; warna: peru; font-weight: bold;} .box-in {visibilitas: visible; display: inline-block; tinggi: 20px; lebar: 20px; perbatasan: 3px solid black; border-color: white transparan white; transform: 2000; ID = "BOX"> <DIV> </SEV> </SEV> </body> <script> var timer = null; box.onClick = function () {cancelanimationFrame (timer); timer = requestanimationframe (function fn () {var otop = document.body.scrolltop || document.documentelementelement. 0) {document.body.scrolltop = document.documentelement.scrolltop = otop - 50; timer = requestAnimationFrame (fn);} else {cancelAnimationFrame (timer);}});} </script>Di atas adalah deskripsi lengkap dari lima metode penulisan (dari implementasi hingga peningkatan) berdasarkan implementasi JS kepada Anda, yang saya perkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda untuk situs web Wulin Network!