Artigo: Botão Scroll com JQuery - Gigasystems

Blog

Em por

botao-scroll-com-jquery
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 !!! =)

Olá, deixe seu comentário para Botão Scroll com JQuery

Enviando Comentário Fechar :/

Veja Também:

Artigos Relacionados a categoria: Blog

Soluções

...CURTIU? AINDA NÃO VIU NOSSO PORTFÓLIO?


Se ainda não viu nosso Portfólio e quer conhecer um pouco mais... aproveite, veja agora mesmo nossos Cases de Sucesso e tenha seu site nos padrões atuais preparado para maioria dos dispositivos e navegadores.

Usamos cookies para manter o site seguro, registrar e personalizar sua navegação. Para mais detalhes sobre essa atividade, acesse nossa Politica de Privacidade

Entendi