codepen - Enlace a una página diferente-> jquery desplácese a un anclaje específico

smooth scroll js

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 desplazarse a ID de página diferente Cuando lo intento, simplemente salta al formulario. Quiero que se desplace suavemente.

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

El problema es la función de jquery para desplazarse al ancla de contacto en la página de inicio desde 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()
    }
});

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

Answer 1

No estoy seguro de cuál es tu 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 aquí , 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, Encabezado:

<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>

La eliminación de index.html en el encabezado de index.html impide que la página se cargue dos veces, por lo que jQuery simplemente desplaza la página hacia abajo.

Answer 2

Un pequeño consejo que encontré al probar tu código:

Como está utilizando el atributo href de la etiqueta de anclaje, aparece como #contact, que jQuery interpreta como una ID.

Deberá agregar una identificación = "contacto" al anclaje para que funcione, independientemente de la página en la que se encuentre.

Answer 3

Prueba esto, tu script está bien, solo falta la última línea

 (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)