11

Tenho uma página OnePage e os links ancora dos menus quando clicados eles apenas "saltam" para a secção da tela mais abaixo, mas eu queria que eles deslizassem com suavidade até a secção 'ancora' destinada.

Tentei colocar o transition via CSS e não tive sucesso, não sei se não tem como fazer isso via CSS, ou se eu estou colocando a classe com o transition no lugar errado.

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a href="#contact" style="transition: all .25s linear;">Contato</a>
        </li>
    </ul>
</div>
3
  • quando clicar no link Contato, a página vai rolar para baixo e você quer o efeito do transition ? Commented 1/10/2015 às 17:54
  • Sim. Porque quando eu clico no contato eu queria que ele rolasse a página até o contato, não que ele fosse instantaneamente para o contato. Queria esse efeito, um delay. Acredito que dê para fazer com CSS, mas eu não consegui. Commented 1/10/2015 às 18:06
  • @ThiagoFriedman Caso prefira eu pego um exemplo. Commented 1/10/2015 às 18:13

2 Respostas 2

13

Infelizmente isto não é possível de ser feito usando CSS, para alcançar este efeito pretendido terás que usar Javascript/jQuery.

Eis um exemplo abaixo de como podes fazer isto utilizando jQuery, e também tens aqui um EXEMPLO AO VIVO NO JSFIDDLE.

Bom, primeiro para que o código jQuery abaixo funcione é necessário implementar a Biblioteca jQuery, antes do encerramento da tag </head> do teu site (caso não a tenhas já implementada).
Para isso isso tens que adicionar a seguinte linha de código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Depois podes então inserir o código jQuery que irá tratar do efeito de scroll suave para o link ancora, que também pode ser implementado logo em seguida a esta linha de código acima.
Tudo junto ficará assim:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
var $doc = $('html, body');
$('a').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});
</script>

Nota: O código jQuery acima foi criado apontando para a tag <a>, mas o recomendado seria criar uma class especifica apenas para lidar com isto, como por exemplo class="scrollSuave" e adicionar esta class aos links que queres que este efeito seja aplicado, por exemplo:

<a href="#contact" class="scrollSuave">Contato</a>
<a href="#about" class="scrollSuave">Contato</a>
etc ...

E claro, também fazer esta modificação no código jQuery apontando-o agora para a class="scrollSuave" nesta linha:

$('.scrollSuave').click(function() {

Desta forma estamos a apontar apenas este script para os links que queremos que o efeito seja aplicado e não para todos os links <a>.

Aqui tens um link com um exemplo: http://jsfiddle.net/qss4y1oe

0
2

Faço usando jQuery

var top = $('#contato').offset.top();

$(window).animation({
    scrollTop: top, // Separa condições.
}, 300);
2
  • Acho assim mais fácil, porém jquery só suporta o último navegador e o penúltimo, certo?
    – Marcelo
    Commented 30/08/2017 às 7:41
  • @MarceloRafael errado. Leia a documentação. Commented 30/08/2017 às 11:44

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 .