Scroll suave com jQuery

Neste código demonstramos uma maneira simples de realizar um scroll suave entre âncoras dentro de uma mesma página, utilizando alguns métodos da biblioteca jQuery.

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {

    var target = $(this.hash);

    if (target.length) {
      $('html, body').animate({ scrollTop: target.offset().top }, 1000);
      return false;
    }

  });
});

Explicando o código:

• $('a[href*="#"]:not([href="#"])') - Adicionamos um evento de clique em todos os elementos de ancora que seus hrefs sejam ids de outros elementos;
• var target = $(this.hash); - this.hash retorna somente a hash da URL contida em um atributo href;
• if (target.length) - Retorna o lenght dos elementos. Caso retorne 0, ou seja, nenhum elemento encontrado com este id, não faz nenhuma ação;
• $('html, body').animate({ scrollTop: target.offset().top }, 1000); - Anima o scrollTop do html e body até o offset().top do elemento, ou seja, faz o html ir até o elemento passado como href.

Veja o código funcionando: