Navegação desilizante com jQuery – Usando função scrollTop

• Home-
• CSS, javaScript, jQuery/
• autor: Adriano Meira /
• publicado em: 27/04/2013

Olá pessoal recentemente entreguei um trabalho para a Brasil na Web onde o cliente precisava de uma página com todo o conteúdo (one page) e o menu ficasse no topo fixo e ao clicar tivesse uma transição suave ente as sessões do site.

Para isso então usei a função “scrollTop” para que ao clicar no menu o site ande até o ID da área que desejo ser exibida de forma vertical.

Então mãos a obra, primeiro vamos dar uma olhada na marcação de HTML

<!-- Menu de Navegação -->
<div class="topo">
	 <ul class="menu">
    	<li><a href="#home">Home</a></li>
    	<li><a href="#sobre">Sobre</a></li>
    	<li><a href="#contato">Contato</a></li>
    </ul>
</div>

<!-- Conteudos -->
<div class="dados" id="home">
	<h4>Home - seja bem vindo!</h4>
	<p>Conteudo aqui...</p>
</div>
<div class="container dados" id="sobre">
	<h4>Sobre - conheça um pouco mais.</h4>
	<p>Conteudo aqui...</p>
</div>
<div class="container dados" id="contato">
	<h4>Contato - entre em contato conosco.</h4>
	<p>Conteudo aqui...</p>
</div>

Agora para posicionar as coisa cada uma em seu lugar, vamos usar o seguinte CSS

.topo{
    position:fixed;
    left:0;
    top:30px;
    width:100%;
    heigth:30px;
}
    .topo .container{background:#63AB3F;}

ul.menu{
    margin:0;
    padding:5px;
    list-style:none;
}
    ul.menu li{float:left;}
    ul.menu a{
        display:block;
        padding:8px 15px;
        font-size:15px;
	color:#FFF;
    }
    ul.menu a:hover{
        background:#FFF;
	color:#333;
	text-decoration:none;
   }

.dados{
    padding-top:100px;
    height:600px;
}

E para criar o efeito de deslizar ao clicar no menu, vamos chamar a biblioteca jQuery e a biblioteca ease que complementa o jQuery nas animações que ela realizar, note que vamos usar uma função, assim podemos rea-utilizar nosso trecho de código em qualquer parte do nosso site.

Funções ficam fora da chamada inicial do jQuery e podem ser guardadas em arquivos separados, o que recomendo para futuras manutenções, mas neste exemplo colocaremos no mesmo arquivo.

<script type="text/javascript">
	//Inicia o jQuery
    $(function(){
    	//chama a função de scroll
    	navegation($('ul.menu a'),0);
	});

    //função para o scroll do menu
    function navegation(elemento,desconto){
        elemento.bind('click',function(event){
            var $anchor = $(this);
            var calculo = $($anchor.attr('href')).offset().top;
            if(desconto){
                var goto = calculo-desconto;
            }else{
                var goto = calculo;
            }

            $('html, body').stop().animate({
                scrollTop: goto
            }, 900,'easeInOutExpo');

            event.preventDefault();
	});				
    }
</script>

Em uma função podemos passar parâmetros, nesta estamos passando dois parâmetros. Um é o elemento que vai ser clicado, no caso do menu com a âncora de onde vai e outro é o valor de desconto. Ele serve para dar uma diferença para o estado final da rolagem, caso não faça isso no CSS. Neste exemplo estamos trabalhando com o desconto se não tiverem coloque no segundo parâmetro.

Agora vamos fazer uma variação para colocar na horizontal, para isso vamos mudar a função “.offset().top;” para “.offset().left;” e mudar o CSS para que o conteúdo tenha uma largura maior. Veja como fica o código da função ajustada:

//função para o menu deslizante
function navegation(elemento,desconto){
    elemento.bind('click',function(event){
    var $anchor = $(this);
    var calculo = $($anchor.attr('href')).offset().left;
    if(desconto){
        var goto = calculo-desconto;
    }else{
        var goto = calculo;
    }		
    $('html, body').stop().animate({
        scrollLeft: goto
    }, 900,'easeInOutExpo');	
        event.preventDefault();
    });				
}

Agora vamos no HTML e colocar uma div em voltar de todos os elementos e uma largura que soma os três conteúdos, no nosso exemplo é 4500px pois cada conteúdo tem 1500px e ficará assim o HTML

<!-- Menu de Navegação -->
<div class="topo">
	 <ul class="menu">
    	<li><a href="#home">Home</a></li>
    	<li><a href="#sobre">Sobre</a></li>
    	<li><a href="#contato">Contato</a></li>
    </ul>
</div>

<!-- Conteudos -->
<div class="cont-dados">
    <div class="dados" id="home">
        <h4>Home - seja bem vindo!</h4>
        <p>Conteudo aqui...</p>
    </div>
    <div class="container dados" id="sobre">
        <h4>Sobre - conheça um pouco mais.</h4>
        <p>Conteudo aqui...</p>
    </div>
    <div class="container dados" id="contato">
        <h4>Contato - entre em contato conosco.</h4>
        <p>Conteudo aqui...</p>
    </div>
</div>

E no CSS ficará assim

.cont-dados{
    width:4500px;
}
.dados{
    padding-top:100px;
    height:100%;
    width:1500px;
    float:left;
}

Bom é por isso ai pessoal, qualquer dúvida deixem comentários ai e compartilhem, até mais!

 

---

Tweet