Salte para ancorar em JavaScript

Ao criar uma página da web ou o site, é necessário redirecionar o usuário para uma página específica várias vezes ou para uma página específica em algum momento. Além disso, tornar o conteúdo relevante acessível ao usuário final instantaneamente. Nesses casos, pular para ancorar em JavaScript é útil para economizar tempo e esforço no final do usuário.

Este blog explicará as abordagens para pular para ancorar em JavaScript.

Como pular para ancorar em JavaScript?

Saltar para ancorar em JavaScript pode ser alcançado usando as seguintes abordagens:

• ““getElementById ()”Método.
• ““localização.Href" propriedade.

Abordagem 1: salte para ancorar em javascript usando o método getElementById ()

O "getElementById ()”Método acessa um elemento com o“ id ”especificado. Este método pode ser aplicado para buscar o elemento âncora e redirecionar para o site especificado no botão Clique.

Sintaxe

documento.getElementById (elemento)

Na sintaxe dada:

• ““elemento" refere-se a "eu ia”Para ser buscado contra o elemento específico.

Exemplo
Neste exemplo em particular, siga as etapas declaradas:

Prossiga para o site do Google

Pular para ancorar

Nas linhas de código acima, execute as seguintes etapas:

• Dentro do "”Tag, especifique o site declarado com um alocado“eu ia”Com a ajuda do“Href”Atributo.
• Além disso, inclua uma imagem e crie um botão com um anexo “ONCLICKEvento invocando a função Jumpannchor ().
• Na parte JavaScript do Código, acesse o “âncora”Elemento por seu“eu ia”Usando o“documento.getElementById ()”Método.
• Isso resultará em pular para a parte da âncora no botão Clique.

Saída

Na saída acima, pode -se observar que, após o clique do botão, a página é redirecionada para o “Url"Executando assim a funcionalidade do"âncora" elemento.

Abordagem 2: salte para ancorar em javascript usando o local.Propriedade Href

O "localização.Href”Propriedade retorna o URL da página atual. Esta propriedade pode ser utilizada para acessar o "ID" aprovado na função que será acessado e pulará a ela.

Exemplo
Vamos seguir o snippet de código abaixo:

Esta é uma imagem

Este é um parágrafo

JavaScript é uma linguagem de programação muito eficaz. Ele pode ser integrado ao HTML para executar funcionalidades adicionais para criar uma página da web geral ou o site atraente e responsivo.

Salte para primeiro



Salte para o segundo

• Inclua um título com um específico “eu ia”E uma imagem.
• Da mesma forma, na próxima etapa, inclua outro título com um específico “eu ia”E um parágrafo.
• Anexe um “OnMouseOverEvento para o “âncora”Elemento invocando a função Jumpannchor () que contém o declarado“eu ia”Como seu parâmetro.
• Da mesma forma, repita a etapa acima para outro “âncora”Elemento com uma função com o especificado“eu ia”.

Vamos continuar até a parte JavaScript do Código:

No snippet de código acima:

• Declare uma função chamada “Jumpannchor ()”. Em seu parâmetro, “eu ia”Refere -se ao ID para pular quando a função será acessada no“âncora" elemento.
• Em sua definição, o “localização.Href”A propriedade será utilizada para pular para o topo (“#”) Do correspondente“eu ia”Discutido na etapa anterior.

Saída

Na saída acima, pode -se observar que, ao passar o mouse em “Salte para primeiro”, O documento é saltado para o topo da âncora correspondente.

Conclusão

O "getElementById ()”Método ou o“localização.Href”A propriedade pode ser utilizada para pular para uma âncora e executar suas funcionalidades em JavaScript. O método anterior redireciona o documento para o site especificado após o botão Clique. A última abordagem pode ser implementada para obter o passado “eu ia”Após a função acessada no“âncora”Elemento e pule para isso. Este artigo explicou as abordagens para pular para ancorar em JavaScript.