Blog

Em 31/12/2014 às 20:12h por Leonardo

Botão Scroll com JQuery

No artigo de hoje, aprenderemos a fazer uma janela popup com posição fixa e botões de controle de scroll da página que são encontrados em muitos sites/blogs, movimentado a tela de maneira suave até o conteúdo desejado, final ou inicio da página. Para isso utilizaremos de recursos Jquery, estilizações em CSS e em JavaScript.

Botão Scroll com JQuery

O primeiro passo é criar o arquivo em HTML, segue um exemplo abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8" lang="pt-BR"/>
    <title>Barra Scrooll</title>
    <!-- Para contralar o popup de navegação-->
    <script language="JavaScript" src="js/popup/banner.js"></script>
    <!-- Javascript para Rolagem-->
    <script type="text/javascript" src="js/rolagem/jquery.min.js"></script>
    <script type="text/javascript" src="js/rolagem/scroll.js"></script>
    <!-- Arquivo de estilização da pagina -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <!-- Esta div é  o popup para navegação seu css é feito em js -->
    <div id="banner_popup" title="Navegacao">
        <!-- Já cada href tem sua seta feita em arquivo css separado e parte aqui mesmo -->
        <a href="#cabecalho" class="scroll"><div id="BotaoScroll" style="margin: 3px;" title="Ir para Cabeçalho"></div></a>
        <a href="#content" class="scroll"><div id="BotaoScroll" style="-moz-transform: rotate(-90deg); -o-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);margin: 3px;" title="Ir para Conteúdo"></div></a>
        <a href="#footer" class="scroll"><div id="BotaoScroll"  style="-moz-transform: rotate(180deg); -o-transform: rotate(180deg);-webkit-transform: rotate(180deg);transform: rotate(180deg);margin: 3px;" title="Ir para Rodapé"></div></a>
    </div>
    <!-- Mostrando o banner na tela -->
    <script language="JavaScript">
        if(document.getElementById('banner_popup'))
            abre_banner();
    </script>
    <!-- Esta div é  o popup para navegação seu css é feito em js -->
    <div id="cabecalho"></div>
    <div id="content"></div>
    <div id="footer"></div>
</html>

Agora iremos estilizar o conteúdo, vamos criar o arquivo style.css

div#BotaoScroll{
background-image: url("../img/seta.png");
width: 40px;
height: 42px;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 5px -35px rgba(0, 0, 0, 0.5);
border-radius: 22px 22px 22px 22px;
}
div#BotaoScroll:hover{
	box-shadow: 1px 2px 6px rgba(182, 82, 82, 0.53);
	-moz-box-shadow: 1px 2px 6px rgba(182, 82, 82, 0.53);
	-webkit-box-shadow: 0px 5px -35px rgba(182, 82, 82, 0.53);
	-webkit-transition: 0.3s ease-in;
	-moz-transition: 0.3s ease-in;
	-o-transition: 0.3s ease-in;
	transition: 0.3s ease-in;
}
div#cabecalho{
	position: relative;
	width: 100%;
	height: 450px;
	background-color: #000;
}
div#content{
	position: relative;
	width: 100%;
	height: 680px;
	background-color: #FFF;
}


div#footer{
	position: relative;
	width: 100%;
	height: 460px;
	background-color: #000;
}

Agora vamos fazer as funções em JS(javascript). Primeiramente faremos a função abre_banner(), ela será responsável por criar o popup que conterá os botões de navegação.

Por questões pessoais, eu criei a função em um arquivo separado chamado banner.

/*Esta função em JavaScript é a cria um popup com posição fixa na tela, 
este popup tem na pagina em html seu conteúdo que neste caso usamos como barra de rolagem da pagina*/
function abre_banner()
{
	//atribuindo a variável o objeto banner_popup da pagina
	var banner_obj = document.getElementById('banner_popup');
	
	//Definindo o css deste objeto que agora é representado pela variavel criada
	banner_obj.style.right = '0px';
	banner_obj.style.top = '45%';
	banner_obj.style.display = 'block';
	banner_obj.style.backgroundColor = 'rgba(23, 29, 63, 0.86)';
	banner_obj.style.position = 'fixed';
	banner_obj.style.padding= '4px';
	banner_obj.style.width = '45px';
	banner_obj.style.height = '140px';
	banner_obj.style.styleFloat = 'right';
	banner_obj.style.zIndex = '500';
	banner_obj.style.borderRadius  = '4px 0px 0px 4px';
	banner_obj.style.MozBorderRadius   = '4px 0px 0px 4px';
}

Pronto agora só precisamos fazer a função, utilizando-se de JQuery, que fará a ação de scroll na página em html. Essa função eu coloquei no arquivo chamado scroll.

É importante ressaltar que para o funcionamento desta função é necessário baixar a jquery.min, recomendo baixa-la do próprio site jquery.com .

Abaixo segue a função:

//Esta função é a responsável por manipular a tela e fazer o efeito de rolagem
//Ela usa Jquery, por isso baixar a biblioteca jquery.min se torna obrigatório
jQuery(document).ready(function($) { 
//Ao clicar nos href com classe scroll
$(".scroll").click(function(event){        
  event.preventDefault();
  //animar o html e body ate o conteudo que esta descrito no href="#exemplo", neste caso iriamos ate a div de nome exemplo
  $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1100);
   });
});

Veja para o funcionamento correto é necessário respeitar os link dos arquivos criados na referência da página escrita em html.

Outro ponto, na formatação de estilo eu defino uma imagem (.png) para o botões criados, vocês precisam baixar uma imagem para que ela funcione, se atentando sempre para o caminho de onde ela está.

O arquivo completo você pode baixar Aqui...

Sugestões, elogios ou críticas é só comentar.

Aprender nunca é o bastante, bons estudos, e como hoje é dia 31 de Dezembro.

FELIZ ANO NOVO !!! =)