Ei! Antes de ir muito longe no buraco do coelho de rolagem suave baseado em JavaScript, saiba que há uma característica CSS nativo para isso: scroll-behavior.
html ( scroll-behavior: smooth; )E antes de chegar a uma biblioteca como a jQuery para ajudar, há também uma versão nativa de JavaScript de rolagem suave, como esta:
// Scroll to specific values // scrollTo is the same window.scroll(( top: 2500, left: 0, behavior: 'smooth' )); // Scroll certain amounts from current position window.scrollBy(( top: 100, // could be negative value left: 0, behavior: 'smooth' )); // Scroll to a certain element document.querySelector('.hello').scrollIntoView(( behavior: 'smooth' ));Dustan Kasten tem um polyfill para isso. E você provavelmente só alcançaria isso se estivesse fazendo algo com a rolagem da página que não poderia ser feito com #target links de salto e CSS.
Acessibilidade de rolagem suave
Qualquer que seja a tecnologia usada para rolagem suave, a acessibilidade é uma preocupação. Por exemplo, se você clicar em um #hashlink, o comportamento nativo é o navegador mudar o foco para o elemento que corresponde a esse ID. A página pode rolar, mas a rolagem é um efeito colateral da mudança de foco.
Se você substituir o comportamento de mudança de foco padrão (o que é necessário, para evitar a rolagem instantânea e habilitar a rolagem suave), você mesmo precisa lidar com a mudança de foco .
Heather Migliorisi escreveu sobre isso, com soluções de código, em Smooth Scrolling and Accessibility.
Smooth Scroll com jQuery
jQuery também pode fazer isso. Aqui está o código para executar uma rolagem de página suave para uma âncora na mesma página. Ele tem alguma lógica incorporada para identificar esses links de salto e não direcionar outros links.
// Select all links with hashes $('a(href*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#0")') .click(function(event) ( // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) ( // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('(name=' + this.hash.slice(1) + ')'); // Does a scroll target exist? if (target.length) ( // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate(( scrollTop: target.offset().top ), 1000, function() ( // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) ( // Checking if the target was focused return false; ) else ( $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again ); )); ) ) ));Veja o Pen Smooth Page Scrolling in jQuery de Chris Coyier (@chriscoyier) no CodePen.
Se você já usou este código e gosta de EI O QUE ESTÁ COM OS ESBOÇOS AZUIS?!, Leia o material sobre acessibilidade acima.