A veces cuando nos queremos mover a un punto de «ancla» nos puede surgir un problema en el caso que tengamos, por ejemplo, un navbar.
¿Por qué? Porque HTML no reconoce si tiene una capa que le tape cierto contenido o no. Para solucionar esto tenemos una propiedad en css llamada scroll-margin-top
, y le podemos pasar los píxeles de margen que queremos respecto a la parte superior.
#elemento{ scroll-margin-top: 72px; }
Podemos ver el ejemplo en Codepen:
See the Pen
Scroll to Anchor with margin top by Kike (@kikebeltran)
on CodePen.