Concrete5：打开单独页面的链接时滚动到锚点答案

【问题标题】：Concrete5: Scrolling to anchor when opening link to separate pageConcrete5：打开单独页面的链接时滚动到锚点
【发布时间】：2017-12-10 18:37:23
【问题描述】：

我正在尝试链接到 Concrete5 中另一个页面的部分，但无法正常工作。当我将鼠标悬停在链接上时，正确的地址会出现在窗口的左下方（Chrome）。但是，当我单击该链接时，什么也没有发生（地址栏中没有文本，页面上也没有任何变化）。

我的教授似乎认为这是我的 JS 文件中的一个问题，因为我遇到了未定义的“顶级”属性错误。

我的链接：
<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 有一个非常初级的理解，我不确定我是否需要为 nav 创建一个 var 或者 if (nav.length) sn-p 到底在完成什么（我理解它的方式是正在确定我要跳转到的对象是否有内容）。

开发者工具中的错误：

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

需要链接到“程序”页面的是该主页上明亮的彩色按钮。使用导航链接时我也遇到了同样的问题（程序>成功）。

谢谢！

【问题讨论】：

标签： jquery navigation anchor concrete5 page-jump

【解决方案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;
         }
     }
 });
});

这会将平滑滚动效果应用于页面上的每个链接。

我希望这可以帮助像我一样被困几天的人！

【讨论】：