Concrete5: Scrolling to anchor when opening link to separate page

Question

I am trying to link to sections of another page in Concrete5 but can't get it to work. When I hover over the link, the correct address appears in the lower left of the window (Chrome). However, when I click the link nothing happens (no text appears in the address bar and nothing changes on the page).

My professor seems to think it's an issue in my JS file, as I've been getting an undefined 'top' property error.

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

The desired end location:
http://maysp.tylerhalldesigns.com/index.php/programs#delinquencyprogram

The anchor:
<hr id="delinquencyprogram" class="anchor">

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

I have a very beginner understanding of Jquery/JS and am not sure if I need to create a var for nav or what exactly the if (nav.length) snippet is accomplishing (the way I understood it was that it was determining if the object I was jumping to had content).

The error 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)

If any more information is needed I'd be happy to supply.

The website can be seen here: http://maysp.tylerhalldesigns.com/index.php

It's the bright colorful buttons on that home page that need to link to the Programs page. I'm also having the same issue when linking using the nav (Programs > Success).

Thanks!

Answer 1

I asked a colleague for help with this and he suggested to remove the JS smooth scroll code entirely to see if the anchors worked without it. They did, so I removed my current code and replaced it with the following:

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

This applies the smooth scroll effect to every link on the page.

I hope this helps whoever was also stuck for days like I was!