Como rolar para um elemento usando JavaScript

Agora, crie um botão com um “ONCLICK”Evento invocando a função“ScrollElement ():

Elemento de rolagem

Depois disso, especifique a fonte da imagem e seu ID para serem rolados:

Por fim, defina uma função chamada “ScrollElement ()”Que buscará o elemento necessário usando o“documento.getElementById ()”Método e aplique o método scrollintoView () para rolar a imagem:

function scrolLelement ()
var elemento = documento.getElementById ("div");
elemento.scrollIntoView ();

Código CSS

No código CSS, aplique as seguintes dimensões para ajustar o tamanho da imagem, referindo -se ao ID da imagem “div”:

#div
Altura: 800px;
Largura: 1200px;
Overflow: Auto;

A saída correspondente será:

Método 2: Role para um elemento em JavaScript usando janela.Método Scroll ()

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

Sintaxe

janela.Roll (coordes x, coorden Y)

Na sintaxe acima, “x-coord”Refere -se a coordenadas X e“Y-coord”Indica as coordenadas y.

O exemplo a seguir explica o conceito declarado.

Exemplo

Repita as mesmas etapas para adicionar o título, criar um botão, aplicar o evento OnClick e especificar a fonte da imagem com seu ID:

Clique no botão para rolar para o elemento.

Elemento de rolagem

Em seguida, defina uma função chamada “ScrollElement ()”. Aqui, ajustaremos as coordenadas usando o “janela.rolagem()”Método acessando a função chamada“Posição()”E aplicando -o no elemento de imagem buscada:

function scrolLelement ()
janela.Roll (0, posição (documento.getElementById ("div")));

Depois disso, defina uma função chamada “Posição()”Tomando uma variável OBJ como seu argumento. Além disso, aplique o “OffsetParent”Propriedade, que acessará o ancestral mais próximo que não tem uma posição estática e a devolverá. Em seguida, incrementar o valor superior atual inicializado com a ajuda do “Offsettop”Propriedade 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:

Posição da função (obj)
var currentTop = 0;
if (obj.OffsetParent)
fazer
CurrentTop += OBJ.Offsettop;
while ((obj = obj.offsetParent));
retornar [currentTop];

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

#div
Altura: 1000px;
Largura: 1000px;
Overflow: Auto;

Saída

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

O "scrollto ()”O método rola o documento especificado para as coordenadas atribuídas. Este método pode ser implementado da mesma forma para obter o elemento usando seu ID e executando a funcionalidade necessária para rolar a imagem específica no DOM.

Sintaxe

janela.Scrollto (x, y)

Aqui, "x" e "y”Aponte para as coordenadas x e y.

Dê uma olhada no seguinte exemplo.

Exemplo

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

Clique no botão para rolar para o elemento.

Elemento de rolagem

Em seguida, defina uma função chamada “ScrollElement ()”E defina o rolagem, chamando o método POSITION () no método scrollTo ():

function scrolLelement ()
janela.Scrollto (0, Posição (documento.getElementById ("div")));

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

Posição da função (obj)
var currentTop = 0;
if (obj.OffsetParent)
fazer
CurrentTop += OBJ.Offsettop;
while ((obj = obj.offsetParent));
retornar [currentTop];

Saída

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 ()”Método para acessar o elemento e aplicar a funcionalidade especificada, o“janela.rolagem()”Método para buscar o elemento, defina suas coordenadas usando uma função e role a imagem ou utilize o“scrollto ()”Método para buscar o elemento e role -o de acordo. Este blog demonstrou o conceito para rolar para um elemento usando JavaScript.