César Aquino Maximiliano

Software Developer | Bombero Voluntario | Tech Instructor

Ancla con scroll suave y evitando cabecera fija

Publicado el por César Aquino Maximiliano en la categoría Desarrollo web

Hay un código que uso seguido pero que siempre lo pierdo y es el de hacer anclas (#algo) pero que se mueva de forma suave y no vaya directo ya que a algunos clientes les parece mucho mejor y a mi parecer, tienen razón.

Además a esto, muchas veces tenemos una cabecera fija que hace que el elemento sea tapado por esta cabecera así que en este código también evitamos eso.

Primero no necesitar poner un atributo diferente en los enlaces:

<a href="#seccion" class="ancla">Ir a sección</a>

Y en su JS deben poner lo siguiente:

Recuerden que este código funciona con jQuery así que es necesario que antes de este código ya tengan jquery en su proyecto.

En esta lína:

$('html, body').animate({scrollTop: (position.top - 60)}, 1000);

60 es la altura de tu cabecera fija para que el ancla se mueva un poco y el 1000 especifica en cuantos milisegundos hará el scroll. Recuerden que 1000 es 1s.

Etiquetas: