Link zu anderer Seite -> jquery Scroll zu bestimmten Anker

Question

Am Ende meiner Homepage habe ich ein Kontaktformular eingefügt und den Anker für diesen Abschnitt als div id = "contact" angegeben.

Wenn der Kontakt-Button auf einer Seite angeklickt wird, sollte er zur Startseite navigieren und beim Seitenladen automatisch zum Kontaktformular scrollen.

Ich habe es nicht geschafft, dies nach der Überprüfung einer ähnlichen Frage, die ich hier gefunden habe, zu arbeiten: jQuery scroll to ID from different page Wenn ich es versuche, springt es einfach zum Formular. Ich möchte, dass es sanft scrollt.

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

Das Problem jquery Funktion mit dem Kontakt Anker auf der Homepage von anderen Seiten blättern:

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

Ich versuche, etwas ähnliches zu diesem Beispiel zu erreichen: http://vostrel.cz/so/9652944/page.html Unterschied, dass anstelle des Seins die "Anker-ID" erscheint in diesem Fall auf beiden Seiten, die Anker-ID (Kontakt) für mich erscheint nur auf einer Seite (Home).

Answer 1

Ich bin mir nicht sicher, was Ihr Code ist, aber ich konnte es zum Laufen bringen. Eine Sache ist, der Code, den Sie gepostet haben, es fehlt ein })(jQuery) am Ende. Wie auch immer, überprüfen Sie, was ich getan habe here, ich denke, es ist, was Sie suchen. Ich bin mir nicht sicher, wie HTML Ihrer Website aussieht, aber ich denke, dass Sie es anpassen können. Sie müssen lediglich das Attribut href der Kontaktschaltfläche auf index.html#contact setzen. Auf index.html können Sie einfach #contact verwenden und es wird das gleiche tun.

In index.html, Rubrik:

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

aber in einer anderen Seite:

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

index.html im Header in index.html Entfernen verhindert, dass die Seite von zweimal geladen werden, so dass jQuery scrollt einfach die Seite nach unten.

Answer 2

Kleiner Tipp stieß ich auf, während Ihr Code testet:

Da Sie das href-Attribut des Anker-Tag verwenden, kommt es über als #contact, die jQuery als ID interpretiert.

Sie müssen dem Anker einen id = "Kontakt" hinzufügen, damit er funktioniert, unabhängig von der Seite, auf der er sich befindet.

Answer 3

Versuchen Sie dieses, Ihr Skript OK ist nur die letzte Zeile fehlt

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