Banyak blogger di taman blog memiliki ikon di sudut kanan bawah halaman di blog. Tidak peduli bagaimana layar membentang, selalu tetap di sudut kanan bawah. Klik halaman ke atas. Mari kita pikirkan tentang menulis demo untuk mencapai efek ini nanti.
1. Sudut kanan bawah ikon diperbaiki.
1. SS menyediakan 4 metode tata letak. Tetap mewakili elemen penentuan posisi absolut. Jadi kami memilih untuk menggunakan Fixed untuk mencapai fiksasi ikon.
| mutlak | Menghasilkan elemen yang benar -benar diposisikan, posisi relatif terhadap elemen induk pertama selain dari posisi statis. Posisi elemen ditentukan oleh atribut "kiri", "atas", "kanan" dan "bawah". |
| tetap | Menghasilkan elemen yang benar -benar diposisikan, posisi relatif terhadap jendela browser. Posisi elemen ditentukan oleh atribut "kiri", "atas", "kanan" dan "bawah". |
| Relatif | Menghasilkan elemen yang relatif diposisikan, posisi relatif terhadap posisi normal mereka. Oleh karena itu, "kiri: 20" menambahkan 20 piksel ke posisi kiri elemen. |
| statis | nilai default. Tidak ada penentuan posisi, elemen muncul di aliran normal (mengabaikan deklarasi atas, bawah, kiri, kanan atau z-indeks). |
| mewarisi | Menentukan bahwa nilai atribut posisi harus diwarisi dari elemen induk. |
2. Kode ini adalah sebagai berikut. Tombol tombol akan selalu ditempatkan di sudut kanan bawah layar. Apakah itu menyeret bilah presisi atas dan bawah atau meregangkan ukuran jendela browser.
Salinan kode adalah sebagai berikut:
#mytopbtn {
Bawah: 5px;
Kanan: 5px;
Posisi: diperbaiki;
}
2. Setelah mengklik, kembali ke sudut atas halaman.
1. Untuk kembali ke sudut atas layar, Anda perlu memahami cara menggunakan JavaScript untuk mengoperasikan gerakan naik dan turun dari drag bar. JavaScript menyediakan metode gulir dan gulir.
Salinan kode adalah sebagai berikut:
window.scrollby (0, -30) // Pindahkan 30 piksel ke atas layar
window.scroll (0,0) // Layar kembali ke sudut atas
2. Yang disebutkan di atas cara memindahkan bilah seret, jadi bagaimana cara bergerak ke bagian atas halaman dengan kecepatan tertentu. Maka Anda perlu menggunakan metode setInterval dan ClearInterval. Ini akan memungkinkan 30 piksel untuk dipindahkan ke atas layar dalam waktu kurang dari 10 milidetik.
Salinan kode adalah sebagai berikut:
<body>
<Div id = "myDiv">
</div>
<tombol id = "mytopbtn" onclick = "topfunc ()"> ke atas </button>
</body>
Salinan kode adalah sebagai berikut:
var myvar;
fungsi topfunc () {
myvar = setInterval (masing -masing Crollby, 10);
}
fungsi masing -masingcrollby (masing -masing) {
if (document.documentelement.scrolltop <= 0) {
ClearInterval (MyVar);
}kalau tidak{
window.scrollby (0, -30);
}
}
AKU AKU AKU. Memperluas
Tombol atas diimplementasikan. Jadi bagaimana kami menerapkan tombol klik di layar bawah? Faktanya, prinsipnya serupa, jadi kami tidak akan menulis demo di sini. Berikan beberapa atribut untuk referensi.
Salinan kode adalah sebagai berikut:
Lebar area yang terlihat dari halaman web: document.body.clientwidth
Tinggi area yang terlihat dari halaman web: document.body.clientHeight
Lebar area yang terlihat dari halaman web: document.body.offsetwidth (termasuk lebar garis tepi)
Tinggi area yang terlihat dari halaman web: document.body.offsetHeight (termasuk lebar garis tepi)
Lebar teks lengkap dari halaman web: document.body.scrollwidth
Teks lengkap dari halaman web: document.body.scrollheight
Halaman web diluncurkan pada tingkat tinggi: document.body.scrolltop
Kiri halaman web sedang diluncurkan: document.body.scrollleft
Di bagian utama halaman web: window.screentop
Kiri teks utama halaman web: window.screenleft
Resolusi Layar Tinggi: Window.Screen.Height
Lebar resolusi layar: window.screen.width
Layar Tersedia Tinggi Ruang Kerja: Window.Screen.AvailHeight
Layar Tersedia Lebar Ruang Kerja: Window.Screen.availwidth
Di atas adalah seluruh konten artikel ini. Saya berharap sepatu anak -anak yang suka bermain blog seperti itu.