Javascript implementiert die Schaltfläche „Zurück zum Anfang“ in der unteren rechten Ecke der Blog-Seite_Javascript-Fähigkeiten

Viele Blogger im Bloggarten haben in ihren Blogs ein Symbol in der unteren rechten Ecke der Seite. Egal wie der Bildschirm gestreckt ist, es bleibt immer in der unteren rechten Ecke. Klicken Sie, um die Seite oben anzuheften. Denken Sie darüber nach, später eine Demo zu schreiben, um diesen Effekt zu erzielen.

1. Die untere rechte Ecke des Symbols ist fixiert.

　 1.SS bietet 4 Layoutmethoden. Fest bedeutet absolut positionierte Elemente. Daher entscheiden wir uns für die Verwendung von „Fixed“, um eine Symbolfixierung zu erreichen.

absolut

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 属性的值。

Erzeugt ein absolut positioniertes Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist. Die Position des -Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

behoben

Generieren Sie ein absolut positioniertes Element, das relativ zum Browserfenster positioniert ist. Die Position des -Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben.

relativ

Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist. Also fügt „left:20“ 20 Pixel zur LINKEN Position des Elements hinzu.

statisch

Standardwert. Ohne Positionierung erscheint das Element im normalen Fluss (ohne Berücksichtigung der Top-, Bottom-, Left-, Right- oder Z-Index-Deklarationen).

erben

gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll.

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.