Em um site que estou desenvolvendo, criei tudo em uma mesma index, uma página de apresentação do trabalho apenas, mas, utilizei o href nos botões e setei os sections, quando o usuário clica, leva até as sections do site. Problemática: Está funcionando, mas, estou querendo que no momento em que clico no botão, tenha um efeito slow-motion até chegar na section, é possível?
1 Resposta
Você pode usar javascript para fazer essa animação que você quer, segue um exemplo:
$('.links a[href^="#"]').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href'),
targetOffset = $(id).offset().top;
$('html, body').animate({
scrollTop: targetOffset - 70
}, 500);
});
<nav class="links">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#sobre">SOBRE</a></li>
<li><a href="#servicos">SERVIÇOS</a></li>
<li><a href="#clientes">CLIENTES</a></li>
<li><a href="#contato">CONTATO</a></li>
</ul>
</nav>
$('.links a[href^="#"]').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href'),
targetOffset = $(id).offset().top;
$('html, body').animate({
scrollTop: targetOffset - 70
}, 500);
});
<nav class="links">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#sobre">SOBRE</a></li>
<li><a href="#servicos">SERVIÇOS</a></li>
<li><a href="#contato">CONTATO</a></li>
</ul>
</nav>
<section id="home">
...
</section>
<section id="sobre">
...
</section>
<section id="servicos">
...
</section>
<section id="contato">
...
</section>