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