Simplicidade e rico em efeitos os sites com âncoras no menu para redirecionar para sessões especificas de uma página são uma ótima opção para hotsite de produtos e eventos, abaixo disponibilizo um script simples de implementar e com todos os efeitos disponíveis com a função animate do JQuery.
Primeiramente você deve inserir a biblioteca JQuery, você pode fazer download no site do JQuery ou então utilizar a base do Google
No head do seu site ou onde preferir você insere o script abaixo, nos comentários do script inseri todos os efeitos animate para substituir no final da linha de código onde o efeito ‘easeInOutExpo’ já esta alocado.
$(function() { $('a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 1000,'easeInOutExpo'); // Outras Animações // linear, swing, jswing, easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine, easeInExpo, easeInCirc, easeInElastic, easeInBack, easeInBounce, easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine, easeOutExpo, easeOutCirc, easeOutElastic, easeOutBack, easeOutBounce, easeInOutQuad, easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine, easeInOutExpo, easeInOutCirc, easeInOutElastic, easeInOutBack, easeInOutBounce }); });
Para o html você pode seguir esta estrutura, link com a hashtag e o id na sessão onde quer que a página deslize
Link 1 Link 2
Pronto é isso! Simples e fácil. Agora você já tem uma navegação em uma única página e com diversos efeitos de deslize para se chegar ao conteúdo.
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!