Javascript implémente le bouton de retour en haut dans le coin inférieur droit du blog page

Javascript implémente le bouton de retour en haut dans le coin inférieur droit du blog page_javascript skills

WBOY

Libérer： 2016-05-16 16:13:30

original

1562 Les gens l'ont consulté

De nombreux blogueurs du jardin des blogs ont une icône dans le coin inférieur droit de la page de leurs blogs, quelle que soit la façon dont l'écran est étiré, elle reste toujours dans le coin inférieur droit. Cliquez pour épingler la page en haut. Pensez à écrire une démo plus tard pour obtenir cet effet.

1. Le coin inférieur droit de l'icône est corrigé.

　 1.SS propose 4 méthodes de mise en page. Fixe signifie des éléments absolument positionnés. Nous choisissons donc d'utiliser fix pour réaliser la fixation des icônes.

absolu

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

Génère un élément en position absolue, positionné par rapport au premier élément parent autre que le positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

corrigé

Générer un élément positionné de manière absolue, positionné par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

relatif

Génère un élément relativement positionné, positionné par rapport à sa position normale. Donc "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.

statique

Valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).

hériter

spécifie que la valeur de l'attribut position doit être héritée de l'élément parent.

2. Der Code lautet wie folgt. Die Schaltfläche „Schaltfläche“ wird immer in der unteren rechten Ecke des Bildschirms platziert. Ob es darum geht, die oberen und unteren Präzisionsbalken zu ziehen oder die Größe des Browserfensters zu strecken.

Code kopieren Der Code lautet wie folgt:

#myTopBtn{

unten: 5px;

          rechts: 5px;

Position:fest;

}

2. Kehren Sie nach dem Klicken zur oberen Ecke der Seite zurück.

1. Wenn Sie zur oberen Ecke des Bildschirms zurückkehren möchten, müssen Sie wissen, wie Sie die Ziehleiste über JavaScript nach oben und unten bewegen.

Code kopieren Der Code lautet wie folgt:

window.scrollBy(0,-30) //Bewegt den Bildschirm um 30 Pixel nach oben

window.scroll(0,0) // Bringe den Bildschirm in die obere Ecke zurück

2. Wir haben oben erwähnt, wie man die Ziehleiste bewegt, also wie man sie mit einer bestimmten Geschwindigkeit an den oberen Rand der Seite bewegt. Anschließend müssen Sie die Methoden setInterval und clearInterval verwenden, um den Bildschirm alle 10 Millisekunden um 30 Pixel nach oben zu verschieben.

Code kopieren Der Code lautet wie folgt:

var myVar;
Funktion TopFunc(){
MyVar=setInterval(EachScrollBy,10); }
Funktion EachScrollBy(eachHeight){

If(document.documentElement.scrollTop<=0){
               clearInterval(myVar);
         }sonst{
              window.scrollBy(0,-30);
}
}

3. Erweiterung

Der Pin-Button wurde implementiert. Wie erkennen wir also, dass durch Klicken auf die Schaltfläche der Bildschirm nach unten verschoben wird? Das Prinzip ist tatsächlich ähnlich, daher werde ich hier keine Demo schreiben. Stellen Sie einige Attribute als Referenz bereit.

Code kopieren Der Code lautet wie folgt:

Die Breite des sichtbaren Bereichs der Webseite: document.body.clientWidth

Höhe des sichtbaren Bereichs der Webseite: document.body.clientHeight

Sichtbare Bereichsbreite der Webseite: document.body.offsetWidth (einschließlich der Breite der Seitenlinien) 

Die Höhe des sichtbaren Bereichs der Webseite: document.body.offsetHeight (einschließlich der Breite der Kante) 

Volltextbreite des Webseitenkörpers: document.body.scrollWidth

Vollständige Texthöhe des Webseitenkörpers: document.body.scrollHeight

Die Höhe der gescrollten Seite: document.body.scrollTop

Die linke Seite der Webseite, die gescrollt wird: document.body.scrollLeft

Im Hauptteil der Webseite: window.screenTop

Der linke Teil des Hauptteils der Webseite: window.screenLeft

Hohe Bildschirmauflösung: window.screen.height

Die Breite der Bildschirmauflösung: window.screen.width

Höhe des verfügbaren Arbeitsbereichs auf dem Bildschirm: window.screen.availHeight

Auf dem Bildschirm verfügbare Arbeitsbereichsbreite: window.screen.availWidth

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er Kindern gefällt, die gerne bloggen.