1

Tenho uma lista de links, exemplo:

    <ul class="todos-links">
     <li> <a href="#alvo1"> Alvo1 </a> <li>
     <li> <a href="#alvo2"> Alvo2 </a> </li>
     <li> <a href="#alvo3"> Alvo3 </a> </li>
     <li> <a href="#alvo4"> Alvo4 </a> </li>
     <li> <a href="#alvo5"> Alvo5 </a> </li>
     <li> <a href="#alvo6"> Alvo6 </a> </li>
   </ul>

E la em baixo, tenho alguns elementos, exemplo:

<div id="alvo1">  eu sou o Alvo1 </div>
<div id="alvo2">  eu sou o Alvo2 </div>
<div id="alvo3">  eu sou o Alvo3 </div>
<div id="alvo4">  eu sou o Alvo4 </div>
<div id="alvo5">  eu sou o Alvo5 </div>
<div id="alvo6">  eu sou o Alvo6 </div>

A dúvida é: Como faço para clicar em um link e realizar um scroll até o seu respectivo alvo?

Exemplo, clicar no link Alvo1 e rolar até a div com id alvo1.

2

1 Resposta 1

2

Você pode fazer assim:

$('[href^="#alvo"]').click(function(event) {
  event.preventDefault();
  let target = this.getAttribute("href")
  $('html, body').animate({ scrollTop: $(target).offset().top}, 1000);
});
div {
  margin-top: 500px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="todos-links">
 <li> <a href="#alvo1"> Alvo1 </a> </li>
 <li> <a href="#alvo2"> Alvo2 </a> </li>
 <li> <a href="#alvo3"> Alvo3 </a> </li>
 <li> <a href="#alvo4"> Alvo4 </a> </li>
 <li> <a href="#alvo5"> Alvo5 </a> </li>
 <li> <a href="#alvo6"> Alvo6 </a> </li>
</ul>


<div id="alvo1">  eu sou o Alvo1 </div>
<div id="alvo2">  eu sou o Alvo2 </div>
<div id="alvo3">  eu sou o Alvo3 </div>
<div id="alvo4">  eu sou o Alvo4 </div>
<div id="alvo5">  eu sou o Alvo5 </div>
<div id="alvo6">  eu sou o Alvo6 </div>

Você pode ler mais sobre o jquery animate aqui.

1
  • Era exatamente isso, eu estava fazendo dessa forma, mas com um objeto selector diferente no evento de click. Obrigado!
    – Jorge.M
    Commented 6/03/2018 às 15:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .