5

Queria saber como faço para que assim que clicar no link de uma página no menu principal, a página vai rolando suavemente até a página desejada que foi clicada?

Exemplo: http://worksofwisnu.com/theme-preview/katemi/product-layout/

Eu queria um exemplo usando links, existe uma pergunta usando botões aqui mas eu estou tendo dificuldade em converter. Estou começando a estudar jQuery agora.

Tenho o seguinte código:

<nav class="collapse navbar-collapse clearfix" role="navigation">
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#nos">Sobre nós</a>
        </li>
        <li><a href="#servico">Serviços</a>
        </li>
    </ul>
</nav>
<section id="servico" class="wow fadeInUp">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-3">
                <div class="service-content"> <a href="#."><span class="service-icon"><i class="fa fa-desktop img-circle wow flipInX"></i></span></a>

                     <h3>Responsive Layout</h3>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies vestibulum Graphic river molestie.</p>
                </div>
            </div>
        </div>
    </div>
</section>

http://jsfiddle.net/yLeY4/

3
  • O que é preciso é usar a ideia da outra resposta usando o href do link para procurar a id do elemento alvo e mudar dentro do animate para scrollTo. Posso mostrar como mais daqui a pouco e se ninguém mais responder. Entretanto era bom ter o HTML definitivo com os href e id com os nomes certos.
    – Sergio
    6/07/2014 às 15:07
  • O site está em construção ainda, estou testando trechos de alguns prontos porque conheço pouca coisa de jQuery. É uma forma de estudo.
    – João
    6/07/2014 às 15:12
  • No exemplo do sérgio os links estão com "defeito", se clicar duas vezes ou mais no link elemento1, ele fica tentando achar o id e se clicar duas vezes ou mais no link elemento2 ele vai de uma âncora para outra sucessivamente. fácil de "CONSERTAR" mas se a gente der scripts prontos, ninguém vai querer estudar a fundo pra entender o funcionamento. Por isso que o forum fica cheio de perguntas ou dúvidas duplicadas, porque as pessoas vão perguntando até obterem o script pronto.
    – CarlosM
    10/04/2017 às 23:15

1 Resposta 1

3

João, a página que indicou usa jQuery. Fazer isso com javascript simples é muito trabalhoso. Se puder usar jQuery então a resposta que o @bfavaretto indicou é a resposta ao seu problema. Se usar outra biblioteca diga qual que tentamos ajudar.

Mas se quiser usar só javascript, pode fazer isso com CSS:

Se criar um wrapper (div exterior) que tem uma outra div dentro que funciona como um elevador. Aí usa transition: top 1s ease-in-out; no CSS e consegue simular o scroll.

Exemplo: http://jsfiddle.net/Je6RR/1

var minhaDiv = document.getElementById('minhaDiv');
var wrapper = document.getElementById('minhaDiv');

function fazerScroll(event) {

    var posicaoAtual = parseInt(minhaDiv.style.top, 10) || 0;
    var alturaDiv = minhaDiv.getBoundingClientRect().height;
    console.log(alturaDiv, posicaoAtual);

    var div = event.target,
        direcao;

    // roda mouse
    var direcaoRoda = event.wheelDelta ? event.wheelDelta : -(event.deltaY ? event.deltaY : event.detail);
    if (event.type == 'wheel') direcao = direcaoRoda > 0 ? 1 : -1;


    // botoes
    if (!direcao) direcao = ~div.className.indexOf('cima') ? 1 : -1;
    if (posicaoAtual >= 0 && direcao == 1) return;
    if (posicaoAtual - 200 < -alturaDiv && direcao == -1) return;
    minhaDiv.style.top = (posicaoAtual + (100 * direcao)) + 'px';
}
var botoes = document.querySelectorAll('button');
for (var i = 0; i < botoes.length; i++) {
    botoes[i].addEventListener('click', fazerScroll);
}
window.addEventListener('wheel', fazerScroll);
minhaDiv.style.top = '0px';

o HTML seria:

<div id="wrapper">
    <div id="minhaDiv">
        <button class="baixo" type="button">Ir para baixo...</button>
        <p>conteudo................. </p>
        <button class="cima" type="button">Ir para cima</button>
    </div>
</div>

Esta solução faz o que precisa. Eventualmente pode ser ajustada para também ouvir eventos de roda do mouse mais antigos ou até "touch" events. Mas como disse em cima, sem uma biblioteca fica mais trabalhoso.

6
  • É jquery mesmo, me confudi mas esse exemplo seu com css, js e html foi bom. Mas a solução do @bfavaretto, pelo que entendi é para botões, eu queria para links.
    – João
    6/07/2014 às 14:15
  • @João, é assim que procura: jsfiddle.net/XBUrZ ?
    – Sergio
    6/07/2014 às 17:22
  • É isso @Sergio mas como implementaria no meu código? Se puder fazer usando meu código, agradeço.
    – João
    6/07/2014 às 18:42
  • @João, corrija o HTML da pergunta para aquilo que quer. Depois terei gosto em ajudar com o jQuery.
    – Sergio
    6/07/2014 às 19:02
  • meu HTML está longe de estar pronto, mas se você puder comentar no código o que cada linha faz ou significa, já estaria bom.
    – João
    7/07/2014 às 14:41

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 .