Como rolar para o topo da página usando javascript/jQuery
A barra de rolagem ou o recurso de rolagem determina a posição em que a rolagem ocorre. Uma barra de rolagem pode se mover na horizontal e na vertical. A barra de rolagem horizontal nos permite rolar o conteúdo horizontalmente eu.e., esquerda ou direita. Enquanto a barra de rolagem vertical nos permite rolar o conteúdo verticalmente eu.e., Para cima ou para baixo.
Agora, questionar é como ativar a rolagem vertical em javascript ou jQuery para que sempre que um usuário clique em um botão, a página rola para a posição superior? Bem! Temos algumas abordagens que podem ser usadas para realizar esta tarefa.
Esta postagem explicará o funcionamento das abordagens listadas abaixo para rolar a página para a posição mais alta:
- Como rolar uma página para a posição superior usando JavaScript?
- Como rolar uma página para a posição mais alta usando jQuery?
Então vamos começar!
Como rolar uma página para a posição superior usando JavaScript?
No JavaScript, a interface da janela fornece um método interno chamado scrollTo () que pode ser usado para rolar para alguma posição específica na página.
Sintaxe
Você segue a sintaxe abaixo para trabalhar com o método scrollTo ():
| 1 | janela.scrollto (coordenada x, coordenada y); |
O trecho acima mostra que a janela.O método scrollTo () aceita coordenada x e coordenada y como parâmetros. Se especificarmos as duas coordenadas como "0", o método scrollto () moverá/rolará a página para o ponto superior.
Exemplo: como usar a janela.Método ScrollTo ()?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
O programa acima executou as tarefas abaixo:
- Criada
e
Tags para adicionar títulos e aplicados CSs embutidos para estilizá -los.
- Criou alguns parágrafos usando
elemento.
- Criou um botão chamado “rollback para o topo!”.
- Clicando no “rollback para o topo!O botão invocará o método "topfun ()".
- No método topfun (), utilizamos a janela.Método ScrollTo ().
- Definimos as duas coordenadas como 0, consequentemente, clicando no “rolagem para o topo!”O botão rolará a página para a posição superior.
A saída verificou que clicar no botão rolou a página para a posição superior.
Como rolar uma página para a posição mais alta usando jQuery?
O jQuery fornece um método chamado "scrolltop ()" que é usado para retornar/definir a posição vertical da barra de rolagem para o elemento direcionado. A posição 0 representa que a barra de rolagem está no topo. Então, temos que passar “0” como um argumento para o método “scrolltop ()” para rolar de volta para o topo da página.
Sintaxe
Siga a sintaxe abaixo para obter a posição vertical da barra de rolagem:
| 1 | $ (seletor).scrolltop (); |
Siga a sintaxe abaixo para definir a posição vertical da barra de rolagem:
| 1 | $ (seletor).scrolltop (posição); |
Exemplo: como usar o método scrolltop ()?
Vamos considerar o seguinte bloco de código para entender o funcionamento do método scrolltop ():
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
O bloco de código acima executou as seguintes funcionalidades:
- Criada
e
Tags para adicionar títulos e aplicados CSs embutidos para estilizá -los.
- Criou alguns parágrafos usando
elemento.
- Criou um botão chamado “Clique aqui!”.
- Clicando no “Clique aqui!O botão invocará o método "topfun ()".
- No método topfun (), utilizamos o método scrolltop ().
- Passamos "0" como uma posição no método scrolltop (). Consequentemente, clicando no “Clique aqui!”O botão rolará a página para a posição superior.
É assim que o método scrolltop () funciona no jQuery
Conclusão
Em JavaScript, passando "0, 0" como parâmetro para a janela.O método scrollTo () rolará a página para a posição superior. Na passagem de jQuery "0" como um argumento para o método "scrolltop ()" rolará a página para a posição superior. Este post considerou alguns exemplos para fornecer um conhecimento detalhado sobre a janela.Métodos ScrollTo () e Scrolltop ().