Concrete5: Scrollen zum Verankern beim Öffnen des Links zum Trennen der Seite

Question

Ich versuche, zu Abschnitten einer anderen Seite in Concrete5 zu verknüpfen, kann aber nicht zur Arbeit kommen. Wenn ich den Mauszeiger über den Link bewege, wird die korrekte Adresse unten links im Fenster (Chrome) angezeigt. Wenn ich jedoch auf den Link klicke, passiert nichts (kein Text erscheint in der Adresszeile und nichts ändert sich auf der Seite).

Mein Professor scheint zu glauben, dass es ein Problem in meiner JS-Datei ist, da ich einen undefinierten "Top" -Eigenschaftsfehler bekommen habe.

My-Link:
<a href="<?=$this->url('programs');?>#delinquencyprogram">Delinquency Intervention + Prevention</a>

Die gewünschte Endposition:
http://maysp.tylerhalldesigns.com/index.php/programs#delinquencyprogram

Der Anker:
<hr id="delinquencyprogram" class="anchor">

Die JQuery:

 $(document).ready(function(){ 
    // Add smooth scrolling to all links 
    $("a").on('click', function(event) { 

    // Make sure this.hash has a value before overriding default behavior 
    if (this.hash !== "") { 
     // Prevent default anchor click behavior 
     event.preventDefault(); 

     // Store hash 
     var hash = this.hash, 
      nav = $('nav'); 

     // Using jQuery's animate() method to add smooth page scroll 
     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area 
     if (nav.height) { 
     $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
     }, 800, function(){ 

     // Add hash (#) to URL when done scrolling (default click behavior) 
     window.location.hash = hash; 
     }); 
    } 
    } // End if 
    }); 
}); 

Ich habe ein sehr Anfänger Verständnis von JQuery/JS und bin nicht sicher, ob ich eine var für nav erstellen müssen oder was genau der if (nav.length) Snippet erreichen (die So wie ich es verstanden habe, war es das Bestimmen, ob das Objekt, zu dem ich gesprungen bin, Inhalt hatte).

Der Fehler in Developer Tools:

Uncaught TypeError: Cannot read property 'top' of undefined 
at HTMLAnchorElement.<anonymous> (maysp.js:79) 
at HTMLAnchorElement.dispatch (jquery.js:4) 
at HTMLAnchorElement.r.handle (jquery.js:4) 

Wenn mehr Informationen benötigt werden, ich liefern würde glücklich sein.

Die Website kann hier gesehen werden: http://maysp.tylerhalldesigns.com/index.php

Es ist die hellen bunten Knöpfe auf dieser Homepage, die auf die Programme Seite verlinkt werden müssen. Ich habe auch das gleiche Problem beim Verlinken mit dem Nav (Programme> Erfolg).

Danke!

Answer 1

Ich bat einen Kollegen um Hilfe mit diesem und er schlug vor, den JS-glatten Scroll-Code vollständig zu entfernen, um zu sehen, ob die Anker ohne ihn funktionierten. Sie taten, so dass ich zog meinen aktuellen Code und ersetzt sie mit folgendem:

$(document).ready(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 
      }, 800); 
      return false; 
     } 
    } 
}); 
}); 

Dies gilt den glatten Scroll-Effekt für jeden Link auf der Seite.

Ich hoffe das hilft wer auch immer tagelang feststeckte wie ich war!