Scroll according to clicked element

Question

Scroll according to clicked element

Navigation

#1 by (3 votes)

1

I have a list of links , example:

    <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>

And below, I have some elements, for example:

<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>

The question is: How do I click on a link and make a scroll up to its alvo ?

Example, click the Alvo1 link and scroll to div with id alvo1 .

javascript jquery

asked by anonymous 06.03.2018 / 16:04

1 answer

How to position the form in the center of a DIV? My input checkbox does not come with JavaScript

score 3 · Accepted Answer

You can do this:

$('[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><ulclass="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>

You can read more about jquery animate here .