0

Olá, como posso desenvolver uma forma de levar o usuário até um trecho (altura) da página quando clicar em um link!

Exemplo:

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

Ao clicar no link a pessoa vai para div roupas

Agradeço desde já!

2 Respostas 2

1

Será isto? Apreveite os atributos data

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

2
  • Muito Obrigado no final ficou assim mando o submit por get (php) para a página e dependendo do retorno aplico um javascript assim: $('html, body').animate({scrollTop:5}, 'slow');
    – user50404
    Commented 15/07/2016 às 14:03
  • hehe de nada @user50404, ainda bem que ajudei
    – Miguel
    Commented 15/07/2016 às 14:04
-1

Olá. Você poderia utilizar o componente scroolspy do Boostrap. Veja Documentação

1
  • Sem a utilização de Boostrap como posso fazer isso? De forma mais "nativa" (espero ser o termo correto) Muito Obrigado @Renan
    – user50404
    Commented 15/07/2016 às 2:35

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 .