Como rolar para um elemento usando JavaScript

Enquanto navega pelas páginas da web, rolar para um elemento mantém o usuário focado, prendendo sua atenção por um longo período. Essa funcionalidade pode ser aplicada quando um usuário precisa rolar usando apenas um clique ou, no caso de testes de automação, para verificar o conteúdo adicionado na parte inferior da página instantaneamente. Nesses cenários, rolar para um elemento em JavaScript adiciona funcionalidade a ser aplicada com um único clique sem muita interação do usuário e economiza tempo.

Este manual irá guiá-lo para rolar para um elemento usando JavaScript.

Como rolar para um elemento usando JavaScript?

Para rolar para um elemento usando JavaScript, você pode utilizar:

• • “ scrollIntoView() ” método
  • “ rolagem() ” método
  • “ scrollTo() ” método

As abordagens mencionadas serão ilustradas uma a uma!

Método 1: Role para um elemento em JavaScript usando o método scrollIntoView()

O ' scrollIntoView() ” rola um elemento para a área visível do Document Object Model (DOM). Este método pode ser aplicado para obter o HTML especificado e aplicar o método específico a ele com a ajuda do evento onclick.

Sintaxe

Na sintaxe dada, “ alinhar ” indica o tipo de alinhamento.

Exemplo

No exemplo a seguir, adicione o seguinte título usando o “

' marcação:

< h2 > Clique no botão para rolar até o elemento. h2 >

Agora, crie um botão com um “ ao clicar ” evento invocando a função “ scrollElement() :

< botão ao clicar = 'scrollElement()' > Elemento de rolagem botão >
< br >

Depois disso, especifique a fonte da imagem e seu id para ser rolado:

< imagem src = 'resenha.PNG' Eu iria = 'div' >

Por fim, defina uma função chamada “ scrollElement() ” que irá buscar o elemento necessário usando o “ document.getElementById() ” e aplique o método scrollIntoView() nele para rolar a imagem:

função elemento de rolagem ( ) {
elemento var = document.getElementById ( 'div' ) ;
element.scrollIntoView ( ) ;
}

Código CSS

No código CSS, aplique as seguintes dimensões para ajustar o tamanho da imagem consultando o id da imagem “ div ”:

#div{
altura: 800px;
largura: 1200px;
estouro: automático;
}

A saída correspondente será:

Método 2: Role para um elemento em JavaScript usando o método window.scroll()

O ' janela.scroll() ” rola a janela de acordo com os valores das coordenadas no documento. Este método pode ser implementado para buscar o id da imagem, definir suas coordenadas usando uma função e rolar a imagem especificada.

Sintaxe

window.scroll ( coordenada x, coordenada y )

Na sintaxe acima, “ x-coord ” refere-se às coordenadas X, e “ y-coord ” indica as coordenadas Y.

O exemplo a seguir explica o conceito declarado.

Exemplo

Repita os mesmos passos para adicionar o título, crie um botão, aplique o evento onclick e especifique a fonte da imagem com seu id:

< h2 > Clique no botão para rolar até o elemento. h2 >
< botão ao clicar = 'scrollElement()' > Elemento de rolagem botão >
< br >
< imagem src = 'imagem.PNG' Eu iria = 'div' >

Em seguida, defina uma função chamada “ scrollElement() ”. Aqui, vamos ajustar as coordenadas usando o “ janela.scroll() ” acessando a função chamada “ Posição() ” e aplicando-o no elemento de imagem buscado:

função elemento de rolagem ( ) {
window.scroll ( 0 , Posição ( document.getElementById ( 'div' ) ) ) ;
}

Depois disso, defina uma função chamada “ Posição() ” tomando uma variável obj como seu argumento. Além disso, aplique o “ offsetPai ”, que acessará o ancestral mais próximo que não possui posição estática e o retornará. Em seguida, incremente o valor superior atual inicializado com a ajuda do “ offsetTopo ” que retornará a posição superior em relação ao pai (offsetParent) e retornará o valor de “ top atual ” quando a condição adicionada é avaliada como verdadeira:

função Posição ( obj ) {
onde atualtop = 0 ;
E se ( obj.offsetParent ) {
Faz {
currenttop += obj.offsetTop;
} enquanto ( ( obj = obj.offsetParent ) ) ;
Retorna [ topo atual ] ;
}
}

Por fim, estilize o contêiner criado de acordo com seus requisitos:

#div{
altura: 1000px;
largura: 1000px;
estouro: automático;
}

Resultado

Método 3: Role para um elemento em JavaScript usando o método scrollTo()

O ' scrollTo() ” rola o documento especificado para as coordenadas atribuídas. Esse método também pode ser implementado para obter o elemento usando seu id e executando a funcionalidade necessária para rolar a imagem específica no DOM.

Sintaxe

window.scrollTo ( x e y )

Aqui, ' x ' e ' S ” apontam para as coordenadas x e y.

Dê uma olhada no exemplo a seguir.

Exemplo

Primeiro, repita as etapas discutidas acima para adicionar um título, botão com um evento onclick e imagem da seguinte forma:

< h2 > Clique no botão para rolar até o elemento. h2 >
< botão ao clicar = 'scrollElement()' > Elemento de rolagem botão >
< br >
< imagem src = 'imagem.JPG' Eu iria = 'div' >

Em seguida, defina uma função chamada “ scrollElement() ” e defina a rolagem invocando o método Position() no método scrollTo():

função elemento de rolagem ( ) {
window.scrollTo ( 0 , Posição ( document.getElementById ( 'div' ) ) ) ;
}

Por último, defina uma função chamada Position() e aplique da mesma forma as etapas discutidas acima para definir as coordenadas da imagem especificada:

função Posição ( obj ) {
onde atualtop = 0 ;
E se ( obj.offsetParent ) {
Faz {
currenttop += obj.offsetTop;
} enquanto ( ( obj = obj.offsetParent ) ) ;
Retorna [ topo atual ] ;
}
}

Resultado

Discutimos todos os métodos convenientes para rolar para um elemento usando JavaScript.

Conclusão

Para rolar para um elemento em JavaScript, utilize o “ scrollIntoView() ” para acessar o elemento e aplicar a funcionalidade especificada, o método “ janela.scroll() ” para buscar o elemento, definir suas coordenadas usando uma função e rolar a imagem, ou utilizar o “ scrollTo() ” para buscar o elemento e rolar de acordo. Este blog demonstrou o conceito de rolar para um elemento usando JavaScript.