Blog

Fica sempre esteticamente mais agradável quando deslizamos num website duma forma mais suave, sem solavancos. E muitas vezes isso acontece ao acedermos às diferentes secções de um site one page, ao clicarmos em cada um dos links no menu de navegação.

Para que isso não aconteça (os tais solavancos), existem várias soluções. A que me parece mais simples mas eficaz, passa por usar CSS e pronto! Simples e práctico, mesmo para quem não domina JavaScript e que quer despachar o trabalho.

O código CSS a usar é:

html {
  scroll-behavior: smooth;
}

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

Outro solução bastante acessível é a utilização de JavaScript (útil também para browsers que não suportem a propriedade scroll-behavior.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $(“a”).on(‘click’, function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== “”) {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery’s animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $(‘html, body’).animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1