Muchos bloggers en el Blog Park tienen un ícono en la esquina inferior derecha de la página en el blog. No importa cómo se estire la pantalla, siempre permanece en la esquina inferior derecha. Haga clic en la página a la parte superior. Pensemos en escribir una demostración para lograr este efecto más adelante.
1. La esquina inferior derecha del icono es fija.
1. SS proporciona 4 métodos de diseño. Fijo representa elementos de posicionamiento absoluto. Por lo tanto, elegimos usar fijo para lograr la fijación del icono.
| absoluto | Genera elementos absolutamente posicionados, posicionando en relación con el primer elemento principal que no sea el posicionamiento estático. La posición de un elemento se especifica por los atributos "izquierda", "superior", "derecha" e "inferior". |
| fijado | Genere elementos absolutamente posicionados, posicionando en relación con la ventana del navegador. La posición de un elemento se especifica por los atributos "izquierda", "superior", "derecha" e "inferior". |
| Relativo | Genere elementos relativamente posicionados, posicionando en relación con su posición normal. Por lo tanto, "Left: 20" agrega 20 píxeles a la posición izquierda del elemento. |
| estático | valor predeterminado. No hay posicionamiento, el elemento aparece en la corriente normal (ignorando la declaración superior, inferior, izquierda, derecha o índice Z). |
| heredar | Especifica que el valor del atributo de posición debe heredarse del elemento principal. |
2. El código es el siguiente. El botón del botón siempre se colocará en la esquina inferior derecha de la pantalla. Ya sea que esté arrastrando la barra de precisión superior e inferior o estirando el tamaño de la ventana del navegador.
La copia del código es la siguiente:
#mytopbtn {
Abajo: 5px;
Derecha: 5px;
Posición: fijo;
}
2. Después de hacer clic, regrese a la esquina superior de la página.
1. Para volver a la esquina superior de la pantalla, debe comprender cómo usar JavaScript para operar el movimiento hacia arriba y hacia abajo de la barra de arrastre. JavaScript proporciona métodos de desplazamiento y desplazamiento.
La copia del código es la siguiente:
Window.scrollby (0, -30) // mover 30 píxeles en la pantalla
Window.scroll (0,0) // La pantalla vuelve a la esquina superior
2. La mencionada anteriormente cómo mover la barra de arrastre, así que cómo moverse a la parte superior de la página a cierta velocidad. Luego debe usar los métodos SetInterval y ClearInterval. Esto permitirá que 30 píxeles se muevan por la pantalla en menos de 10 milisegundos.
La copia del código es la siguiente:
<Body>
<div id = "myDiv">
</div>
<botón id = "mytopbtn" onClick = "topFunc ()"> a arriba </botón>
</body>
La copia del código es la siguiente:
var myvar;
función topFunc () {
myVar = setInterval (Everyscrollby, 10);
}
Función EveryScrollby (cada uno) {
if (document.documentelement.scrolltop <= 0) {
ClearInterval (myvar);
}demás{
Window.scrollby (0, -30);
}
}
Iii. Expandir
Se implementa el botón superior. Entonces, ¿cómo implementamos el clic del botón en la pantalla inferior? De hecho, el principio es similar, por lo que no escribiremos una demostración aquí. Proporcione algunos atributos para referencia.
La copia del código es la siguiente:
El ancho de área visible de la página web: document.body.clientwidth
La altura del área visible de la página web: document.body.clientHeight
El ancho de área visible de la página web: document.body.offsetwidth (incluido el ancho de la línea de borde)
La altura del área visible de la página web: document.body.offsetheight (incluido el ancho de la línea de borde)
Ancho de texto completo de la página web: document.body.scrollwidth
Texto completo de la página web: document.body.scrollheight
La página web se implementa en un alto nivel: document.body.scrolltop
La izquierda de la página web que se está implementando: document.body.scrollleft
En la parte principal de la página web: Window.screentop
Izquierda del texto principal de la página web: Window.Screenleft
Resolución de pantalla alta: Window.screen.Height
Ancho de resolución de pantalla: Window.screen.Width
Pantalla disponible en la altura del espacio de trabajo: ventana.screen.availheight
Pantalla disponible en el espacio de trabajo: Window.screen.availwidth
Lo anterior es todo el contenido de este artículo. Espero que los zapatos para niños a los que les encanta jugar blogs como este.