Planos a partir de R$ 32/mês Inscreva-se Agora

Scroll Suave para Link Interno

Código | 9.579 | 14 de setembro de 2016
Scroll Suave para Link Interno

A web é um emaranhado de links. Um tipo de link muito comum é a ancora, que seria um link interno. Basta adicionar ao href uma cerquilha (jogo da velha #) seguida por um nome único ex: href=”#contato” e atribuir um id=”contato” ao elemento na página.

Assim ao clicar no link, o scroll automaticamente vai “pular” para onde está o elemento com o id.

O objetivo desse tutorial é mudarmos esse pulo, para um scroll suave. Isso garante que o usuário entenda o contexto em que ele está, e em qual local na página esse conteúdo se encontra.

See the Pen scroll-suave-link-interno by André | Origamid (@origamid) on CodePen.

Vamos usar JavaScript para isso, com a ajuda das funções de jQuery para facilitar a escrita.

A lógica é simples:



$('.nav a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  var id = $(this).attr('href'),
  targetOffset = $(id).offset().top;
    
  $('html, body').animate({ 
    scrollTop: targetOffset - 100
  }, 500);
});

Agora vamos por partes:

1 – Primeiro eu quero identificar o momento em que alguém clica em um link que comece com #, assim eu posso criar no mesmo menu links internos e externos. Pois caso o link não comece com #, o seu comportamento será padrão.


// o a[href^="#"] seleciona apenas links com href="#"
// atribuímos a função on e passamos o parâmetro click nela
$('.nav a[href^="#"]').on('click', function(e) {

2 – Agora eu preciso identificar o valor de href do link que eu cliquei


// o preventDefault(); serve para prevenir que o link funcione da forma padrão
// que no caso seria "pulando" para o elemento com o id
e.preventDefault();

// crio um variável id e coloco o valor do atributo (attr) href nela.
// eu quero o valor referente ao link que eu cliquei, por isso o $(this)
var id = $(this).attr('href'),

// crio outra variável com o valor offset do elemento que possui id
// com o mesmo valor do link. Esse offset é a distância entre o elemento
// e o topo da página, por isso o offset().top
targetOffset = $(id).offset().top;

3 – Agora eu posso criar a animação do scroll até o local do id, já que possuo a distância.


  // Seleciono os elementos html e body (por motivo de inconsistência entre browsers)
  // e atribuo a eles a função animate do CSS
  $('html, body').animate({
    
    // eu quero animar o scrollTop com o valor do meu offset
    // o - 100 serve para criar uma distância de 100px entre
    // o destino e o topo da página, assim o meu menu fixo não
    // cobre o conteúdo ao final do scroll. Esse valor vai depender
    // do tamanho do seu menu (e se você tem menu fixo ou não)
    scrollTop: targetOffset - 100

  // por último eu defino a velocidade da animação, neste caso 500ms
  }, 500);
});

Você não precisa se limitar a animação apenas, você pode por exemplo adicionar uma classe ativo ao item do menu, dependendo da área do site em que ele esteja.

Mais Dicas

Como utilizar Media Queries para sites Responsivos

DICA #03 CSS – Hexadecimal

Recomende Ao Usuário

currentColor CSS

Scroll Suave para Link Interno