0

Script para rolagem de página mais suave

#JavaScript #HTML #jQuery
Luis Zancanela
Luis Zancanela

Em uma Landing Page, página com várias seções, normalmente tem-se links que apontam para as seções, no HTML puro quando o link é acionado a página simplesmente "pula" para o destino. Para dar uma sensação de rolagem suave montei um script em javascript com JQuery.

A página que montei no projeto de Recriando a Interface da Netflix aqui mesmo na DIO: RETROLATRA - Classic Retro Game Portal utilizou o script nos links Início, Jogos, Consoles e Manuais que apontam para suas respectivas seções na página.


Passo 1: Para poder configurar o efeito deve-se inserir o script abaixo, de preferência em um arquivo .js, por exemplo, rolagem.js:

//velocidade: slow, fast ou milisegundos
//ancora para topo: inicio
	function rolarPagina(ancora,velocidade){
	    const alturaHeader = $("header").height();
	    let rolarPara;
        ancora != 'inicio' ? rolarPara = ($(ancora).offset().top-alturaHeader) : rolarPara = 0;
        $('html, body').animate({scrollTop:rolarPara}, velocidade);
	    return false;
	};


Passo 2: Se o código acima foi inserido em um arquivo HTML, fazer a importação na página com a tag <script>, exemplo:

<script src="js/rolagem.js"></script>

É importante também importar a biblioteca do JQuery para o que o script funcione corretamente. Para isso basta fazer download da biblioteca jQuery e importar no projeto com a tag <script> também. Exemplo:

<script src="js/owl/jquery.min.js"></script>


Passo 3: Fazer a chamada da função para utilizar o efeito em si, para isso é só colocar no atributo "href" da tag <a> (link) o termo: "javascript:rolarPagina('id_da_secao',velocidade)", onde o 'id_da_secao' é o id da div da seção que o link aponta e a velocidade é a definição da velocidade do efeito, que pode ser 'fast', 'slow' ou milisegundos. Exemplo:

<a id="a_consoles" href="javascript:rolarPagina('#consoles','slow')">Consoles</a>


Caso queiram ter acesso ao fonte, segue link no GitHub: https://github.com/didifive/dio-netflix-clone-retrolatra.


Este efeito é simples e pode ser adaptado para outros eventos ou mesmo ter aprimoramentos.

0
7

Comentários (0)

Estudando Sistemas de Informação, Formado em Administração de Empresas. Estudo Informática a mais de 20 anos e trabalho na área a mais de 15 anos. Sempre aprendendo, alinhando tecnologias e negócios.

Brasil