javascript

Hacer que el scroll baje unos píxeles en un enlace de tipo anchor

Cuando estamos creando una web onepage con enlaces anchor y con cabeceras de tipo sticky o fixed, nos podemos encontrar con el problema de que la cabecera se queda por encima del contenido que queremos que nos muestre dónde se encuentra nuestra etiqueta anchor.

Para solucionar este problema simplemente podemos añadir el siguiente código javascript modificando las pixels de alto que tiene nuestra cabecera (en este caso la hemos bajado -100px):

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

 

¿Tienes dificultades con el desarrollo de tu web o el diseño de tu web? En Doowebs somos expertos en el área que podremos ayudarte.