1

Estoy trabajando en una página web de estilo similar a una OnePage. Tiene un index en el que se muestra toda la información pero en la sección de servicios, en vez de usar acordeones o modals, la empresa quiere que lleve a una página diferente por cada servicio. Es decir, son 10 páginas en total.

El scroll (es una animación que sube y baja la web en función de los targets del menú), en el index, funciona perfectamente... pero en el momento que cambio de página a una de servicios y después quiero volver al index (para ver mas servicios, contactar con ellos etc) en vez de colocarse bien el target y verse el div que contiene el nombre de cada sección, lo ubica justo debajo del mismo.

El menú está fijado siempre al principio de la página, por lo que es fácil navegar por la web y acceder a las secciones.

El enlace al jquery es este:

https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js

Y este es el código que estoy usando para el scroll actual:

   $(function() {
     $('a[href*="#"]:not([href="#"])').click(function() {

      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top-80
          }, 1000);
          return false;
        }
      }
     });
     });

El problema está en que cuando estoy en la página de servicios, me entra a la función y también a la zona del href pero no entra al if del pathname.replace y tras varios intentos y pruebas no he conseguido que salga bien. ¿Alguien puede ayudarme con esto?

0

1 respuesta 1

2

Por lo que veo en la descripción de tu problema, este ocurre cuando estás en otra página distinta al "home", en este caso servicios.

Voy a asumir que tienes las siguientes url:

Home: http://misitio.com/

Servicios: http://misitio.com/servicios.html

Cuando estás en la página de servicios y haces clic en tu botón o enlace que te lleva al home, dices que no es verdadero el resultado del siguiente if:

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {..} 

Evaluando la primera condición (en la página de servicios), obtendríamos estos resultados:

location.pathname = /servicios.html
this.pathname = /#

Asumo que en alguna parte de la url debe haber un # teniendo en cuenta el selector de la segunda línea: a[href*="#"]:not([href="#"])

En todo caso, luego haces un replace, el cual simplemente elimina la barra oblicua inicial /.

Por consiguiente al final tendríamos como resultado que estás comparando servicios.html con #, lo cual no es igual y por ese motivo el resultado es falso (no entra al if).

La segunda condición location.hostname == this.hostname no debería tener mayor problema, a menos que estés en un subdominio distinto o similar.


Teniendo en cuenta que la idea es que el scroll funcione al regresar a la página Home, lo que necesitas es que esto lo haga una vez el contenido esté listo y detecte si hay un hash, de ser así, hacer el scroll respectivo. Te pongo una idea de como sería la solución, aunque deberías mejorarle algunas cosas:

$(function() {
  ...
  if(window.location.hash) {
    var seccion = $(window.location.hash);
    if (seccion.length) {
      $('html, body').animate({
        scrollTop: seccion.offset().top-80
      }, 1000);
      return false;
    }
  }
  ...
}
15
  • Buenas :) Lo que quiero es que en el index (pongamos que es: index.html) se desplace con scroll (algo que hace) a las secciones "Inicio" (es decir, arriba del todo), centro, servicios, equipo y contacto. Cada sección está dividida con un <div> de color azul con el nombre de la sección en blanco. Entonces, dentro del apartado de servicios, hay 9 imágenes representativas de cada servicio. Encima de cada imagen el nombre del servicio y justo debajo, una pequeña descripción del mismo. Las medidas son 3x3. (sigo en otro comentario)
    – Dianne
    el 11 may. 2016 a las 16:23
  • Entonces, cada imagen de servicios va a una URL distinta (siguiendo ese ejemplo del index, sería este enlace: index.html/servicios1). Lo que quiero es que cuando en el menú (cuyos enlaces son todos index.html#sección) vaya a la sección correspondiente del Index.html . Es decir, que durante el index haga el scroll pero si estoy dentro de uno de los servicios, me regrese al mismo lugar donde hago click. Con el scroll se queda perfecto con el scrollTop: target.offset().top-80 , pero al hacer el cambio no me lo pilla y tampoco puedo cambiar de posición los targets: tiene que subir siempre 80px.
    – Dianne
    el 11 may. 2016 a las 16:29
  • Si, es eso mas o menos. Mira, así es el fragmento de los enlaces del menú (una versión antigua del menú en notepad++ pero funcional) : i.imgur.com/BR3Hv1p.png . La sección de servicios tiene enlaces a otras URL, pero el menú es el mismo todo el rato (fijado en la cabecera de la página). Entonces, haces click en uno de los servicios y te vas a otra página, pero desde esa otra página, cuando haces click en por ejemplo centro, debe de llevarte al index.html, al tag de #centro. Eso lo hace, pero no me sube los 80px que tiene que subir y que sube si no me salgo de index.html
    – Dianne
    el 11 may. 2016 a las 19:51
  • Si, el problema es solo los 80px que cuando estoy en una de las páginas de servicios, al volver al index no me coge esos 80px, me pone el target en el lugar exacto en el que está, pero por la forma de la codificación de la página, tiene que tener ahí el target y ese -80px. He probado varias cosas (perdí ya la cuenta de ellas) y ninguna me ha funcionado, así que he decidido preguntar a ver si alguien sabe como hacer que me coja esos 80px que no me coge cuando estoy en por ejemplo index.html/servicio1 y quiero regresar a por ejemplo index.html#centro, cogiendo esos 80px.
    – Dianne
    el 11 may. 2016 a las 23:09
  • Te cuento que acabo de crear un escenario muy similar al tuyo, solo para probar todo con detalle, y en efecto el problema es lo que te explico en la solución. Lo que necesitas en tu index.html es una función que se ejecute con el ready() y detecte si hay un hash, para hacer la animacion (incluyendo los 80 px) hasta dichopunto.
    – Shaz
    el 12 may. 2016 a las 0:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.