He estado trabajando en la implementación de un script JavaScript jQuery con enlaces de navegación activos y desplazamiento suave. Se supone que debe resaltar el enlace de navegación cuando se desplaza a una sección correspondiente (usando el enlace de anclaje) y luego también cuando el usuario hace clic en un elemento de navegación, se supone que debe resaltar ese enlace y desplazarse a su sección. Sin embargo, eso solo funciona cuando, en la página index.html, no en la página cv.html.
El problema al que me enfrento es un "TypeError no detectado: $(...).offset() no está definido", aquí hay un enlace al sitio:
http://jona09h34.web.videndjurs.dk/ .
El error se puede reproducir cuando está en CV.html y se intenta volver a index.html usando cualquiera de los enlaces (Om mig, Projekter o Kontakt) (traducido: Acerca de mí, Proyectos, Contacto)
EDITAR: Reescribí la pregunta, agregando un enlace al sitio con el que tengo problemas.
El código parece funcionar para mí, pero intente cambiar su navegador o etiqueta de secuencia de comandos. Yo recomendaría este:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Su problema inmediato:
En primer lugar, verifique la URL de destino en la parte inferior izquierda de su navegador cuando pase el mouse sobre los enlaces de navegación en la página de CV. Observe cómo apuntan a la página de cv con el # adjunto, pero todo su contenido está en su página de índice.
Su archivo activeLink.js escucha los clics en esos elementos de navegación y luego usa el valor hash para encontrar la parte superior de un <div> coincidente y desplazarse hasta él. Pero esos divs de destino solo existen en su página de inicio, no en su página de CV.
Tienes un par de opciones para solucionarlo. La forma más rápida sería modificar su javascript para verificar la ubicación actual de la window.location y solo activar su código de "desplazamiento suave" si está en la página de inicio.
Arreglarlo de otra manera:
Podría ir un paso más allá y eliminar todo el javascript que maneja el desplazamiento de la página (líneas 10-48 en su activeLink.js ) y dejar que CSS lo haga. Podrías agregar lo siguiente a tu css:
html { scroll-behaviour:smooth; scroll-padding-top: 100px; } scroll-padding-top le permite especificar un desplazamiento para tener en cuenta su encabezado fijo. Deberá modificar ese valor y probablemente agregar una consulta de medios para que también funcione para su encabezado móvil más pequeño.
Ahora, necesita cambiar sus enlaces de navegación para que sigan funcionando independientemente de la página en la que se encuentre. En lugar de solo <a href="#about">Om mig</a> , agregue la ruta completa: <a href="index.html#about">Om mig</a> . Ahora, si hace clic en el enlace cuando no está en index.html, cargará la página correcta. El desplazamiento suave se activará y lo llevarán al ancla correcta.