{"id":683,"date":"2016-10-02T00:18:19","date_gmt":"2016-10-02T00:18:19","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=683"},"modified":"2018-10-29T21:38:46","modified_gmt":"2018-10-29T21:38:46","slug":"criando-pagina-com-rolagem-por-secao-html-css-jquery","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/criando-pagina-com-rolagem-por-secao-html-css-jquery\/","title":{"rendered":"Criando p\u00e1gina com rolagem por se\u00e7\u00e3o – HTML, CSS, jQuery"},"content":{"rendered":"

Continuando a ajuda a meus brothers, depois de manipular os elementos com JavaScript<\/a>, o meu mesmo amigo queria fazer um site com se\u00e7\u00f5es, onde toda vez que clicasse em algum bot\u00e3o, ele rolaria para a pr\u00f3xima se\u00e7\u00e3o. A ideia inicial dele era fazer com \u00e2ncoras, e sem JavaScript ou jQuery, mas, eu disse a ele que era mole fazer com jQuery, e ia ficar uma anima\u00e7\u00e3o bacana.<\/p>\n

Pois bem, aqui vamos n\u00f3s.<\/p>\n

O resultado final est\u00e1 aqui<\/a>, mas segue o passo-a-passo adiante que \u00e9 mole.<\/p>\n

[EDIT-20\/10\/2018]: Para navegadores novos, foram necess\u00e1rias algumas modifica\u00e7\u00f5es. Acompanhe o c\u00f3digo fonte no link no fim do post.<\/p>\n

HTML (parte I)<\/h2>\n

Vamos come\u00e7ar criando nosso HTML com 4 divs dentro do body. Todas as divs devem ter a classe\u00a0secao<\/em> e cada div uma ID espec\u00edfica.<\/p>\n

\"pagina-secao-01\"<\/a><\/p>\n

CSS (parte I)<\/h2>\n

Vamos agora colocar uma cor em cada se\u00e7\u00e3o, e tamb\u00e9m tirar\u00a0margin\u00a0<\/em>e\u00a0padding\u00a0<\/em>do\u00a0body<\/em> (um reset para as divs ficarem ocupando toda a janela do navegador). Coloque uma cor diferente em cada se\u00e7\u00e3o.<\/p>\n

\"pagina-secao-02\"<\/a><\/p>\n

jQuery (parte I)<\/h2>\n

Se voc\u00ea testou sua p\u00e1gina, percebeu que ainda t\u00e1 tudo branco n\u00e9? Porque as se\u00e7\u00f5es\u00a0ainda n\u00e3o tem altura definida.<\/p>\n

Parecido com o que expliquei aqui<\/a>, vamos pegar a altura do documento, e atribuir a cada se\u00e7\u00e3o. Mas antes disso, vamos importar o jQuery no cabe\u00e7alho da nossa p\u00e1gina.<\/p>\n

Depois vamos criar uma vari\u00e1vel, para armazenar a altura da janela, vamos us\u00e1-la v\u00e1rias vezes. Em seguida, vamos atribuir esta altura a cada uma das se\u00e7\u00f5es. Tem um detalhe importante. Se nossa fun\u00e7\u00e3o for chamada antes das divs existirem no documento…n\u00e3o vai acontecer nada. Ent\u00e3o pega um detalhe.<\/p>\n

\"pagina-secao-03\"<\/a><\/p>\n

O simples fato de voc\u00ea colocar a chamada da fun\u00e7\u00e3o dentro da chamada jQuery, faz com que essa fun\u00e7\u00e3o seja chamada apenas depois que o documento estiver carregado. Sensacional n\u00e9?<\/p>\n

HTML (parte II)<\/h2>\n

Se voc\u00ea j\u00e1 testou como est\u00e1 ficando (eu espero que voc\u00ea tenha o m\u00ednimo de curiosidade, por favor), viu que as se\u00e7\u00f5es j\u00e1 est\u00e3o l\u00e1, cada uma com o mesmo tamanho, que \u00e9 o tamanho da janela do seu navegador, maneiro (Y).<\/p>\n

Agora, vamos criar um bot\u00e3o s\u00f3 com HTML e CSS pra clicar e ir para a pr\u00f3xima se\u00e7\u00e3o.<\/p>\n

Dentro das primeiras se\u00e7\u00f5es, voc\u00ea vai criar um\u00a0span\u00a0<\/em>dentro com a classe\u00a0icone-scroll<\/em><\/strong> e dentro desse span voc\u00ea vai criar outro com duas classes:\u00a0scroll-next\u00a0<\/em><\/strong>e\u00a0scroll<\/em><\/strong>.<\/p>\n

Na \u00faltima se\u00e7\u00e3o, voc\u00ea vai tamb\u00e9m criar o span com a classe\u00a0icone-scroll<\/em>, por\u00e9m, dentro desse span voc\u00ea vai colocar\u00a0dois\u00a0<\/strong>spans com as seguinte classes:\u00a0scroll-top\u00a0<\/strong><\/em>e\u00a0scroll<\/em><\/strong>.<\/p>\n

\"pagina-secao-04\"<\/a><\/p>\n

CSS (parte II)<\/h2>\n

Agora vamos dar forma ao \u00edcone. Para que o \u00edcone sempre fique posicionado em rela\u00e7\u00e3o a sua se\u00e7\u00e3o, vamos colocar\u00a0position relative<\/em> em todas as se\u00e7\u00f5es. Depois vamos fazer uma elipse –\u00a0tamb\u00e9m conhecida como bola redonda<\/del> – com um tom de cinza escuro, e dentro uma setinha, tudo isso s\u00f3 com CSS, pega a ideia primeiro da bolinha:<\/p>\n

<\/a><\/p>\n

Alguns coment\u00e1rios sobre o c\u00f3digo acima. Border-radius<\/em> pra deixar o span<\/em>\u00a0el\u00edptico.\u00a0Position absolute + bottom\u00a0<\/em>vai deixar o \u00edcone sempre na parte debaixo da se\u00e7\u00e3o. Left 50% + margin-left<\/em> com a metade negativa do tamanho (width = 50, margin-left = -25<\/em>) pra que ele fique exatamente no centro, da horizontal.<\/p>\n

CSS (parte III)<\/h2>\n

No span mais interno, vamos fazer um quadrado, mais s\u00f3 colocar borda do lado direito e embaixo. O que vai acontecer? Uma seta! Por\u00e9m ela ainda n\u00e3o vai estar na posi\u00e7\u00e3o que a gente quer. Pra isso, vamos girar as setas de next pra baixo e as de top para cima.<\/p>\n

\"pagina-secao-06\"<\/a><\/p>\n

A \u00faltima regra do CSS \u00e9 pra chegar apenas a segunda setinha, do scroll-top um pouco pra cima.<\/p>\n

Resultado:<\/p>\n

\"pagina-secao-07\"<\/a>\"pagina-secao-08\"<\/a><\/p>\n

jQuery (parte II)<\/h2>\n

T\u00e1 ficando bom. Agora vamos criar uma fun\u00e7\u00e3o que rola a p\u00e1gina para a pr\u00f3xima se\u00e7\u00e3o, ou para o topo da p\u00e1gina, e depois vamos cham\u00e1-la no click do bot\u00e3o que acabamos de criar.<\/p>\n

Quando clicar no bot\u00e3o, o c\u00f3digo ir\u00e1 verificar em qual se\u00e7\u00e3o estamos. Se estiver na primeira se\u00e7\u00e3o, ele vai rolar um tamanho igual a altura da janela. Se estiver na segunda se\u00e7\u00e3o, duas vezes a altura da janela, e assim por diante. Se ele estiver na \u00faltima se\u00e7\u00e3o, ele vai rolar para o in\u00edcio da p\u00e1gina.<\/p>\n

\"pagina-secao-09\"<\/a><\/p>\n

Pra que voc\u00ea n\u00e3o tenha problemas de carregamento (e tamb\u00e9m \u00e9 uma boa pr\u00e1tica para a p\u00e1gina carregar mais r\u00e1pido) coloque esse nosso script no fim da p\u00e1gina, antes do fechamento da tag HTML<\/em>.<\/p>\n

O resultado foi esse aqui \u00f3:<\/p>\n

\"pagina-secao\"<\/a><\/p>\n

Adicional<\/h2>\n

Se voc\u00ea ainda quiser fazer uma gra\u00e7a, e obrigar o usu\u00e1rio a navegar apenas se\u00e7\u00e3o por se\u00e7\u00e3o, tirando o scroll da p\u00e1gina, basta colocar\u00a0overflow hidden<\/em> na tag HTML. Mas, em quest\u00f5es de usabilidade, isso n\u00e3o \u00e9 uma boa pr\u00e1tica. Mas se estiver s\u00f3 brincando, divirta-se.<\/p>\n

O c\u00f3digo completo, voc\u00ea pode ver aqui no meu Github<\/a>.<\/p>\n

Refer\u00eancias<\/h2>\n