Smooth scrolling on page

Question

I wanted to know how to do it so that once I click on a page link in the main menu, the page will scroll smoothly to the desired page that was clicked?

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

I wanted an example using links, there is a question using buttons here but I’m having trouble converting. I’m starting to study jQuery now.

I have the following code:

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

Answer 1

João, the page you indicated uses jQuery. Doing this with simple javascript is very difficult. If you can use jQuery then the answer @bfavaretto indicated is the answer to your problem. If you use another library tell us which one we try to help.

But if you want to use javascript only, you can do this with CSS:

Create a wrapper (external div) that has another div inside that works like an elevator. There uses transition: top 1s ease-in-out; in CSS and can simulate scroll.

Example: 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';

the HTML would be:

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

This solution does what it needs. Eventually it can be adjusted to also hear older mouse wheel events or even "touch" Events. But as I said above, without a library it gets more work.