Javascript melaksanakan butang kembali ke atas di penjuru kanan sebelah bawah kemahiran page_javascript blog

Ramai blogger di Taman Blog mempunyai ikon di sudut kanan bawah halaman dalam blog mereka Tidak kira bagaimana skrin diregangkan, ia sentiasa berada di sudut kanan bawah. Klik untuk menyemat halaman ke bahagian atas. Fikirkan tentang menulis Demo kemudian untuk mencapai kesan ini.

1. Penjuru kanan sebelah bawah ikon dibetulkan.

　 1.SS menyediakan 4 kaedah susun atur Bermaksud elemen berkedudukan mutlak. Jadi kami memilih untuk menggunakan tetap untuk mencapai penetapan ikon.

mutlak

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

Menghasilkan elemen berkedudukan mutlak, diposisikan relatif kepada elemen induk pertama selain daripada kedudukan statik. Kedudukan elemen ditentukan melalui atribut "kiri", "atas", "kanan" dan "bawah".

tetap

Janakan elemen berkedudukan mutlak, diposisikan berbanding tetingkap penyemak imbas. Kedudukan elemen ditentukan melalui atribut "kiri", "atas", "kanan" dan "bawah".

saudara

Menghasilkan elemen yang agak berkedudukan, berkedudukan berbanding kedudukan normalnya. Jadi "kiri:20" menambah 20 piksel pada kedudukan KIRI elemen.

statik

Nilai lalai. Tanpa kedudukan, elemen muncul dalam aliran biasa (mengabaikan pengisytiharan atas, bawah, kiri, kanan atau indeks z).

warisi

menyatakan bahawa nilai atribut kedudukan harus diwarisi daripada elemen induk.

2. Le code est le suivant. Le bouton Bouton sera toujours placé dans le coin inférieur droit de l’écran. Qu'il s'agisse de faire glisser les barres de précision supérieure et inférieure ou d'étirer la taille de la fenêtre du navigateur.

Copier le code Le code est le suivant :

#monTopBtn{
en bas : 5px ;
          à droite : 5 px ;
position:fixe;
>

2. Revenez dans le coin supérieur de la page après avoir cliqué.

1. Si vous souhaitez revenir au coin supérieur de l'écran, vous devez savoir comment déplacer la barre de déplacement de haut en bas via JavaScript fournit les méthodes de défilement et de défilement.

Copier le code Le code est le suivant :

window.scrollBy(0,-30) //Déplace l'écran de 30 pixels
window.scroll(0,0) // Ramène l'écran dans le coin supérieur

2. Nous avons mentionné ci-dessus comment déplacer la barre de déplacement, donc comment la déplacer vers le haut de la page à une certaine vitesse. Ensuite, vous devez utiliser les méthodes setInterval et clearInterval pour déplacer l'écran vers le haut de 30 pixels toutes les 10 millisecondes.

Copier le code Le code est le suivant :

Vers le haut

Copier le code Le code est le suivant :

var maVar;
Fonction TopFunc(){
MaVar=setInterval(EachScrollBy,10);
>

fonction EachScrollBy(eachHeight){
Si(document.documentElement.scrollTop<=0){
               clearInterval(myVar);
         }autre{
              window.scrollBy(0,-30);
>
>

3. Rallonge

Implémentation du bouton épingle. Alors comment se rendre compte que cliquer sur le bouton met l’écran en bas ? En fait, le principe est similaire, je n’écrirai donc pas de démo ici ? Fournissez-vous quelques attributs pour référence.

Copier le code Le code est le suivant :

La largeur de la zone visible de la page web : document.body.clientWidth
Hauteur de la zone visible de la page Web : document.body.clientHeight
Largeur de la zone visible de la page Web : document.body.offsetWidth (y compris la largeur des lignes latérales)
La hauteur de la zone visible de la page web : document.body.offsetHeight (y compris la largeur du bord)
Largeur du texte intégral du corps de la page Web : document.body.scrollWidth
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight
La hauteur de la page en cours de défilement : document.body.scrollTop
Le côté gauche de la page Web en cours de défilement : document.body.scrollLeft
Sur le corps principal de la page Web : window.screenTop
La partie gauche du corps principal de la page Web : window.screenLeft
Haute résolution d'écran : window.screen.height
La largeur de la résolution de l'écran : window.screen.width
Hauteur de la zone de travail disponible à l'écran : window.screen.availHeight
Largeur de la zone de travail disponible à l'écran : window.screen.availWidth

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que les enfants qui aiment les blogs l'aimeront.