Beberapa ringkasan implementasi dari halaman HTML yang kembali ke atas

Penulis：Eve Cole Waktu Pembaruan：2025-04-11 05:32:01

Baru -baru ini, saya perlu membuat tombol untuk kembali ke atas saat mengembangkan situs web, tetapi saya terutama mengembangkannya untuk backend dan saya tidak terlalu terampil di frontend. Setelah kueri informasi online, saya telah membuat tombol untuk kembali ke atas. Berikut ini adalah dua cara sederhana untuk merekamnya. Teman -teman yang menyukai situs web ini dapat menandai dan akan memperbarui materi pembelajaran mereka dari waktu ke waktu.

Tipe Pertama: Mengutip JQuery Eksternal

Buat halaman HTML baru, salin dan simpan kode berikut, buka melalui browser, dan Anda dapat melihat efeknya.

 <! Doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </itement> <tyle> .arrow {border: 9px solid transparent; Border-Bottom-Color: #3DA0DB; Lebar: 0px; Tinggi: 0px; Atas: 0px} .stick {width: 8px; Tinggi: 14px; Border-Radius: 1px; Latar Belakang-Color: #3DA0DB; Atas: 15px; } #back_top div {position: absolute; margin: otomatis; Kanan: 0px; Kiri: 0px; } #back_top {latar belakang-warna: #dddddd; Tinggi: 38px; Lebar: 38px; Border-Radius: 3px; Tampilan: Blok; kursor: pointer; Posisi: diperbaiki; Kanan: 50px; Bawah: 100px; Tampilan: Tidak Ada; } </style> </head> <body> <Div id = artikel> </div> <div id = back_top> <div class = panah> </div> <div class = stick> </div> <script src = http: //cdn.staticfile.org/jquery/1.11.1.1 (function> {function> </jMir. i = 0; i <100; i ++) {$ (#artikel) .Append (<p> xxxxxxxxxx <br> </p>)}) </script> <script> $ (function () {$ (window) .scroll (function () {// Selama jendela gulir, kode berikut ini akan diarahkan ke window schroll. Document.scrolltop; ditambahkan, jika tidak akan ada flashing}}); }); </script> </body> </html>

Jenis kedua: Gunakan CSS dan ikon khusus untuk mengaturnya

Seluruh kode sederhana dan indah. Kembali ke tombol atas. Sama seperti di atas, salin kode ke file html dan buka untuk melihat efeknya.

 <! Doctype html> <html lang = en> <head> <meta charset = utf-8> <itement> doc </iteme> <tyle> #back_top {display: block; Lebar: 60px; Tinggi: 60px; Posisi: diperbaiki; Bawah: 50px; Kanan: 40px; Border-Radius: 10px 10px 10px; Dekorasi Teks: Tidak Ada; Tampilan: Tidak Ada; Latar Belakang-Color:#999999; } #back_top span {display: block; Lebar: 60px; Warna: #ddddd; Ukuran font: 40px; Teks-Align: tengah; margin-top: 4px; } #back_top span: hover {color: #cccccc; } </tyle> </head> <body> <Div id = artikel> </div> <a id = back_top href = skrip:;> <span> ⌆ </span> </a> </div> <script> $ (function () {untuk (var i = 0; i <100; i ++) {$ (#artikel). }}) </script> <script> $ (function () {$ (window) .scroll (function () {// Selama jendela gulir, kode berikut akan dipicu var scrollt = document.documentElement.scrolltop + document.body.scrolltop; // Dapatkan ketinggian gulir jika gulir (scrolltop> 200) {scroLDOP; $ (#back_top) .fadein (400); Gulir ke atas dalam 200ms. $ (html, body) .animate ({scrolltop: 0px}, 200);

Dua metode di atas hanya memberikan ide, dan dapat digunakan secara langsung. Anda dapat men -debug ikon yang Anda inginkan sendiri. Saya berharap ini akan membantu untuk pembelajaran semua orang, dan saya harap semua orang akan lebih mendukung wulin.com.