Concrete5: прокрутка для привязки при открытии ссылки на отдельную страницу

Question

Я пытаюсь сделать ссылку на разделы другой страницы в Concrete5, но не могу заставить его работать. При наведении курсора на ссылку в левом нижнем углу окна отображается правильный адрес (Chrome). Однако, когда я нажимаю на ссылку, ничего не происходит (текст не отображается в адресной строке и ничего не меняется на странице).

Кажется, мой профессор считает, что это проблема в моем файле JS, поскольку я получаю неопределенную ошибку свойства top.

Моя ссылка:
<a href="<?=$this->url('programs');?>#delinquencyprogram">Delinquency Intervention + Prevention</a>

Желаемое конечное местоположение:
http://maysp.tylerhalldesigns.com/index.php/programs#delinquencyprogram

Якорь:
<hr id="delinquencyprogram" class="anchor">

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

Я очень хорошо разбираюсь в Jquery/JS и не уверен, что мне нужно создать var для nav или что именно выполняет фрагмент if (nav.length) (как я понял, он определял, был ли объект Я прыгал, чтобы иметь содержание).

Ошибка в инструментах разработчика:

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)

Если понадобится дополнительная информация, я с удовольствием предоставлю.

Веб-сайт можно увидеть здесь: http://maysp.tylerhalldesigns.com/index.php

Это яркие красочные кнопки на этой домашней странице, которые должны ссылаться на страницу программ. У меня тоже такая же проблема при линковке с помощью навигационной программы (Программы> Успех).

Спасибо!

Answer 1

Я попросил коллегу помочь с этим, и он предложил полностью удалить код гладкой прокрутки JS, чтобы проверить, работают ли якоря без него. Они сделали, поэтому я удалил свой текущий код и заменил его следующим:

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

Это применяет эффект плавной прокрутки к каждой ссылке на странице.

Надеюсь, это поможет тому, кто застрял на несколько дней, как я!