Page height with javascript, take the user to a point of the page

Asked

Viewed 77 times

0

Hello, how can I develop a way to take the user to a stretch (height) of the page when clicking on a link!

Example:

<div class="roupas"> </div> <div class="bolsas"> </div> <div class="calçados"> </div> <a>Roupas</a>

By clicking on the link the person goes to div clothes

Thank you in advance!

php javascript jquery html

2 answers

1


Is this it? Display the attributes date

$('[data-vestuario]').on('click', function() {
  var seccao = $(this).data('vestuario');
  $('html, body').animate({
    scrollTop: $(seccao).offset().top, // animar pag até à distancia entre a secção correspondente e o topo da página
  });
});
span {
 display:inline-block;
 margin: 0 30px;
 color: red;
}
div {
  height: 600px; /* Isto é só pelo exemplo, não aconselho a usar isto num proj real */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span data-vestuario="#roupas">Roupas</span>
<span data-vestuario="#sapatos">Sapatos</span>
<span data-vestuario="#cuecas">Cuecas</span>

<div id="roupas">
  Secção das roupas
</div>
<div id="sapatos">
  Secção das sapatos
</div>
<div id="cuecas">
  Secção das cuecas
</div>

  • Thank you very much at the end so I send Submit by get (php) to the page and depending on the return I apply a javascript like: $('html, body'). Animate({scrollTop:5}, 'slow');

  • You know nothing @user50404, I’m glad I helped

-1

Hello. You could use the scroolspy component of Boostrap. Behold Documentation

  • Without using Boostrap how can I do it? More "native" (hopefully the correct term) Thank you @Renan

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.