2

Estou criando um site, e estou querendo fazer um efeito de scroll nas páginas onde ao clicar no item do menu a pagina role até onde esta as informações relacionadas.

Seria mais ou menos igual a esse, porém um pouco mais simples apenas com a rolagem mesmo.

Alguém poderia me ajudar?

2
  • 3
    No futuro coloque por favor código na pergunta, para podermos responder com detalhe ao problema que tem.
    – Sergio
    26/05/2014 às 18:34
  • Robson, as respostas foram corretas para o problema que tinhas?
    – Sergio
    19/05/2016 às 10:58

4 Respostas 4

5

Você precisa de ter no menu alguma indicação do alvo para o scroll.

Pode ser o id do elemento guardado numa propriedade data, um href/ancora ou outro. Se usar uma ancora (<a>) pode precisar de usar o .preventDefault() para impedir o link de ser seguido (nalguns casos quer mesmo que o link fique no url, então não deve usar).

Depois tem de interceptar o click pode usar o jQuery .anymate() para fazer o scroll, indo buscar a posição desse elemento como alvo.

Exemplo de HTML

<div class="menu">
    <div data-destino="parte1">Parte 1</div>
    <div data-destino="parte2">Parte 2</div>
</div>
<div id="parte1"></div>
<div id="parte2"></div>

Exemplo de jQuery

$('.menu div').on('click', function () {
    var destino = '#' + $(this).data('destino');
    var posicaoDestino = $(destino).position().top;
    $('html, body').stop().animate({
        scrollTop: posicaoDestino
    }, 2000);
});

Exemplo: http://jsfiddle.net/zc966/

2
  • Eu ia responder praticamente o mesmo :) jsfiddle.net/QaK3P
    – bfavaretto
    26/05/2014 às 18:34
  • @bfavaretto :) Mas já agora, junte a sua resposta pois você usa ancoras e eu não
    – Sergio
    26/05/2014 às 18:35
1

Utilizando o href dos links:

<a href="#Id_da_div"> link </a>

Ex:

<a href="#contato">Fale Conosco</a>
<script>
$('a[href*=#]').click(function() {
    var destino = $(this).attr('href');
    $("html, body").animate({scrollTop: $(destino).position().top}, 600);
    return false;
});
</script>

Para alterar a velocidade do scroll, altere o último parametro de 600 para o valor desejado. O valor é em milisegundos, ou "slow", "mid", "fast".

2
0

Oi, você pode usar o scrollTop em JQuery.

Tenta isso (FUNCIONANDO)

$("#elemento1").click(function(){
    $('html, body').animate({ 'scrollTop' : $("#elemento2").position().top }, 1);
});
0

Você pode usar ANCHOR.

Link a ser clicado

<a href="#vemPraCa">Clique aqui para dar Scroll</a>

Lugar aonde o Scroll vai

<a name="vemPraCa"></a>

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 .