Enlace a otra página -> jquery desplácese a ancla específica

Question

En la parte inferior de mi página de inicio he incluido un formulario de contacto y he especificado el ancla para esta sección como div id = "contact".

Cuando se hace clic en el botón de contacto en cualquier página, debe navegar a la página de inicio y al cargar la página, desplácese automáticamente al formulario de contacto.

No he tenido éxito en hacer que esto funcione después de revisar una pregunta similar que encontré aquí: jQuery scroll to ID from different page Cuando intento, simplemente salta al formulario. Quiero que se desplace suavemente.

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li> 

La función jQuery problema para desplazarse hasta el ancla de contacto en la página de inicio de otras páginas:

(function($){ 
    var jump=function(e) { 
     if (e) { 
      e.preventDefault(); 
      var target = $(this).attr("href"); 
     } else { 
      var target = location.hash; 
     } 

     $('html,body').animate({ 
      scrollTop: $(target).offset().top 
     },1000,function() { 
      location.hash = target; 
     }); 
    } 

    $('html, body').hide() 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

    if (location.hash) { 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show() 
      jump() 
     }, 0); 
    } else { 
     $('html, body').show() 
    } 
}); 

que estoy tratando de lograr algo similar a este ejemplo: http://vostrel.cz/so/9652944/page.html diferencia de que en lugar de el "identificador de anclaje" en este caso que aparece en ambas páginas, el id. de anclaje (contacto) para mí solo aparece en una página (inicio).

Answer 1

No estoy seguro de cuál es su código, pero he podido ponerlo en funcionamiento. Una cosa es que, el código que publicaste, falta un })(jQuery) al final. De todos modos, mira lo que hice here, creo que es lo que estás buscando. No estoy seguro de cómo se ve el HTML de su sitio web, pero creo que puede adaptarlo. Todo lo que necesita hacer es establecer el atributo href del botón de contacto en index.html#contact. En index.html, puede simplemente usar #contact y hará lo mismo.

En index.html, Header:

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="#contact">Contact</a> 
</div> 

pero en cualquier otra página:

<div id="header"> 
    <a href="index.html">Homepage</a> 
    <a href="otherpage.html">Other page</a> 
    <a href="otherpage2.html">Another Page</a> 
    <a href="index.html#contact">Contact</a> 
</div> 

eliminación index.html en la cabecera en index.html impide que la página se cargue dos veces, de modo que jQuery simplemente desplaza la página hacia abajo.

Answer 2

Un pequeño consejo que me encontré mientras que las pruebas a cabo su código:

Debido a que usted está utilizando el atributo href de la etiqueta de anclaje, se trata sobre como #contact, que jQuery interpreta como una identificación.

Deberá agregar un id = "contacto" al anclaje para que funcione, independientemente de la página en la que se encuentre.

Answer 3

Prueba de esto, su guión está bien sólo la última línea de falta

(function ($) { 

    var jump = function (e) { 
     if (e) { 

      e.preventDefault(); 
      var target = $(this).attr("href"); 

     } else { 

      var target = location.hash; 

     } 
     $('html,body').animate({ 

      scrollTop: $(target).offset().top 

     }, 1000, function() { 

      location.hash = target; 

     }); 
    } 

    $('html, body').hide(); 

    $(document).ready(function() { 
     $('a[href^=#]').bind("click", jump); 

     if (location.hash) { 
      setTimeout(function() { 

       $('html, body').scrollTop(0).show() 
       jump(); 

      }, 0); 
     } else { 

      $('html, body').show(); 

     } 
    }); 
})(jQuery)