Smooth scrolling on page

Question

Smooth scrolling on page

Navigation

#1 by (3 votes)

5

I would like to know how I can do that once I click the link of a page in the main menu, the page will gently scroll to the desired page that was clicked?

Example: link

I wanted an example using links, there is a question using buttons here but I am having difficulty 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>

link

javascript jquery rolamento

asked by anonymous 06.07.2014 / 06:31

1 answer

About size verification Because when I write in div it changes position?

score 3 · Accepted Answer

John, the page you entered uses jQuery. Doing this with simple javascript is a lot of work. If you can use jQuery then is the answer to your problem. If you use another library say which one we're trying to help.

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

If you create a wrapper (outer div) that has another div inside that works like an elevator. It uses transition: top 1s ease-in-out; in CSS and can simulate scroll.

Example: link

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

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 listen to older mouse wheel events or even "touch" events. But as I said above, without a library it gets more laborious.