Muitos blogueiros no parque do blog têm um ícone no canto inferior direito da página no blog. Não importa como a tela se estende, ela sempre permanece no canto inferior direito. Clique na página para cima. Vamos pensar em escrever uma demonstração para alcançar esse efeito mais tarde.
1. O canto inferior direito do ícone é fixo.
1. O SS fornece 4 métodos de layout. Fixo representa elementos de posicionamento absoluto. Por isso, optamos por usar fixo para obter a fixação do ícone.
| absoluto | Gera elementos absolutamente posicionados, posicionando em relação ao primeiro elemento pai que não seja o posicionamento estático. A posição de um elemento é especificada pelos atributos "Esquerda", "Top", "Right" e "Bottom". |
| fixo | Gere elementos absolutamente posicionados, posicionando em relação à janela do navegador. A posição de um elemento é especificada pelos atributos "Esquerda", "Top", "Right" e "Bottom". |
| Parente | Gerar elementos relativamente posicionados, posicionando em relação à sua posição normal. Portanto, "Esquerda: 20" adiciona 20 pixels à posição esquerda do elemento. |
| estático | valor padrão. Não há posicionamento, o elemento aparece no fluxo normal (ignorando a declaração superior, inferior, esquerda, direita ou Z-índice). |
| herdar | Especifica que o valor do atributo de posição deve ser herdado do elemento pai. |
2. O código é o seguinte. O botão do botão sempre será colocado no canto inferior direito da tela. Seja arrastando a barra de precisão superior e inferior ou esticando o tamanho da janela do navegador.
A cópia do código é a seguinte:
#mytopbtn {
Inferior: 5px;
Direita: 5px;
Posição: fixado;
}
2. Depois de clicar, retorne ao canto superior da página.
1. Para retornar ao canto superior da tela, você precisa entender como usar o JavaScript para operar o movimento para cima e para baixo da barra de arrasto. O JavaScript fornece métodos de rolagem e rolagem.
A cópia do código é a seguinte:
Window.Scrollby (0, -30) // Mova 30 pixels para cima da tela
Window.Scroll (0,0) // A tela retorna ao canto superior
2. O acima mencionado como mover a barra de arrasto, portanto, como se mover para o topo da página a uma certa velocidade. Em seguida, você precisa usar os métodos setInterval e ClearInterval. Isso permitirá que 30 pixels sejam movidos pela tela em menos de 10 milissegundos.
A cópia do código é a seguinte:
<Body>
<div id = "mydiv">
</div>
<button id = "mytopbtn" onclick = "topfunc ()"> to top </botão>
</body>
A cópia do código é a seguinte:
var myvar;
função topfunc () {
myVar = setInterval (EverScrollby, 10);
}
function alamercrollby (cada vez) {
if (document.documentElement.scrolltop <= 0) {
ClearInterval (myvar);
}outro{
window.scrollby (0, -30);
}
}
Iii. Expandir
O botão superior é implementado. Então, como implementamos o botão Clique na tela inferior? De fato, o princípio é semelhante, por isso não escreveremos demonstração aqui. Forneça alguns atributos para referência.
A cópia do código é a seguinte:
A largura da área visível da página da web: document.body.clientwidth
A altura da área visível da página da web: document.body.clientHeight
A largura da área visível da página da web: document.body.offsetWidth (incluindo a largura da linha de borda)
A altura da área visível da página da web: document.body.offSethEight (incluindo a largura da linha de borda)
Largura completa do texto da página da web: document.body.scrollwidth
Texto completo da página da web: Document.body.scrolHeight
A página da web é lançada em um nível alto: document.body.scrolltop
A esquerda da página da web sendo lançada: document.body.scrollleft
Na parte principal da página da web: Window.ScREENTOP
À esquerda do texto principal da página da web: Window.Screenleft
Resolução de tela alta: window.screen.height
Largura da resolução da tela: window.screen.width
Tela Disponível na altura do espaço de trabalho: window.screen.availHeight
Tela disponível Largura do espaço de trabalho: window.screen.availwidth
O acima é o conteúdo inteiro deste artigo. Espero que os sapatos infantis que gostem de jogar blogs gostam.