Scroll con desplazamiento suave

Es una tendencia cada vez más fuerte el diseño y desarrollo de “landing pages” con mucho contenido y, por lo tanto, con una navegación a través de anclas en la misma página. El comportamiento de dicha navegación es más agradable si conseguimos que no sea tan agresivo como añadir simplemente el ancla en la etiqueta <a> e implementamos un desplazamiento más suave que, además, indique al usuario cuánto scroll ha recorrido.

 

Con añadir este fragmento de código justo antes de </body>, conseguiremos este efecto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
   $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	    var target = $(this.hash);
	    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	    if (target.length) {
	       $('html,body').animate({
	          scrollTop: target.offset().top
	        }, 1000);
		return false;
	    }
         }
      });
   });  
</script>
DESCARGAR      DEMO

¿Hablamos?

ir arriba