Para entender o que é âncora, imagine a seguinte situação, ao clicar em um link “topo” ao final da página, o usuário será direcionado ao início da página. Perceba que, o conceito de âncora é simples, são links estabelecidos em qualquer parte do documento, que servirão como “marcadores de locais”.
Será exemplificado duas formas de se criar âncoras, mas para ambas deve-se conter:
- Um local definido na página que será a âncora;
- Um link para direcionar ao local específico;
Âncora em HTML
Primeiramente deve-se definir o local de destino. Você deve incluir a seguinte tag exatamente no local onde quer que o link vá:
<div id="topo"></div>
Deve-se definir o identificador do local (neste caso uma div) marcador da página. Em seguida, pode-se utilizar a tag “a” para criar um link onde irá direcionar para o ponto onde foi definido (div topo).
<a href="#topo">ir topo</a>
Observe que, no href foi colocado o símbolo “#” acompanhado do identificador do componente para qual a página será direcionada, este símbolo fará com que o navegador entenda que o link direcionará uma âncora.
Âncora em Javascript
Da mesma maneira que o HTML, deve-se definir o local de destino e o link da âncora, a diferença , que será utilizado um método Javascript para direcionar a âncora, e utilizar o método onlick no lugar do href, observe.
<script type="text/javascript">
function ancora(objID) {
document.getElementById(objID).focus();
}
</script>
<div id="topo"></div>
<a onclick="ancora('topo');" ></a>
Veja que, o método onlick direciona à função “ancora” e é passado o nome do componente a qual será direcionada a página. Dentro da função, utilizando o getElementById, o componente é “focado”, assim ocorrendo o processo de âncora.
Podem ser incluídas quantas âncoras quiser na mesma página, apenas deve-se diferenciá-las pelo nome.
Cara ajudou demais! Valeu
obrigado