Fer que el scroll baixe uns píxels en un enllaç de tipus anchor

javascript

Quan estem creant una web onepage amb enllaços anchor i amb capçaleres de tipus sticky o fixed, ens podem trobar amb el problema que la capçalera es queda per damunt del contingut que volem que ens mostre on es troba la nostra etiqueta anchor.

Per a solucionar aquest problema simplement podem afegir el següent codi javascript modificant les píxels d’alt que té la nostra capçalera (en aquest cas l’hem baixat -100px):

function offsetAnchor() {
  if(location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}
window.addEventListener("hashchange", offsetAnchor);
window.setTimeout(offsetAnchor, 1);