无法读取属性'；顶部'；未定义Jquery/javascript的定义

也许这个问题以前已经被回答过很多次了，但是我找不到任何与我的代码相关的东西

当菜单导航打开等时，一切正常。

平滑滚动

也可以工作，除非我单击向下的

箭头进入下一部分，否则平滑滚动不起作用。
我一直在看它，并试图找出它有一段时间，但我不能这样做

我还在学习jquery和javascript。
可以在
打开开发工具，您将在控制台中看到错误

编辑
添加

到

平滑滚动对于“向下箭头”不起作用，但我仍然可以
'未捕获的TypeError:无法读取未定义的'top'属性'

console.log（目标）输出正确的目标#家、家等

这是我的代码：

    //smooth transition to sctions when links in header are clicked

    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a').each(function () {
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }
      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });
            });
        });

//单击标题中的链接时，平滑过渡到选项
函数onScroll（事件）{
var scrollPosition=$（document.scrollTop（）；
$（'nav.mobile-nav a'）。每个（函数（）{
var currentLink=$（此）；
var refElement=$（currentLink.attr（“href”）；
if（refElement.position（）.top滚动位置）{
$（'nav.mobile-nav a'）.removeClass（“当前”）；
currentLink.addClass（“当前”）；
}
否则{
currentLink.removeClass（“当前”）；
}
});
}
$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
$（'nav.mobile-nav a[href^=“#”]”）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'nav.mobile-nav a'）。每个（函数（）{
$（this.removeClass（'current'）；
});
$（this.addClass（'current'）；
var target=this.hash；
$target=$（target）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top
}，1000，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
这是一种样式，因此javascript中的值必须是
.style.top
而不仅仅是
.top
。这就是为什么你会变得“未定义”。没有为正在使用的对象指定
top
属性

我不使用jQuery，但在javascript中，要检索top属性，可以执行以下操作：

var a = document.getElementsByTagName('div')[0];
var b = a.style.top;
console.log(parseInt(b,10)); //cause b will be equal to 'nnpx' and parseInt removes the 'px'

但是，这不会读取CSS中设置的任何顶级值。要读取该值，需要使用javascript设置该值。有一种方法可以读取CSS样式表中的值集，但我不记得是如何读取的。
问题在于代码不够具体。循环遍历列表中的所有项目，即where#标记的所有链接，以及指向其他页面的链接。这就是我得到top not defined错误的原因，它要查找的项目不存在
a[href^=“#””
添加该项后，循环仅迭代带有#ID标记的项

评论了我所做的更改

//单击标题中的链接时平滑过渡到选项

    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a[href^="#"').each(function () { //added a[href^="#"] so that the loop only iterates over the elements with the ID tag
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        console.log(currentLink.attr("href")); //log
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }

      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"], .arrow-down-wrapper a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
          console.log(target);
          $('html, body').stop().animate({
                    'scrollTop': $target.offset().top - 100
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });

            });
        });

函数onScroll（事件）{
var scrollPosition=$（document.scrollTop（）；
$（'nav.mobile-nav a[href^=“#””）。每个（函数（）{//添加了一个[href^=“#”]），这样循环只在带有ID标记的元素上迭代
var currentLink=$（此）；
var refElement=$（currentLink.attr（“href”）；
console.log（currentLink.attr（“href”）；//log
if（refElement.position（）.top滚动位置）{
$（'nav.mobile-nav a'）.removeClass（“当前”）；
currentLink.addClass（“当前”）；
}
否则{
currentLink.removeClass（“当前”）；
}
});
}
$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
$（'nav.mobile-nav a[href^=“#”]，.arrow down wrapper a[href^=“#”]”。on（'click'，函数（e）{
e、 预防默认值（）；
$（文档）。关闭（“滚动”）；
$（'nav.mobile-nav a'）。每个（函数（）{
$（this.removeClass（'current'）；
});
$（this.addClass（'current'）；
var target=this.hash；
$target=$（target）；
控制台日志（目标）；
$（'html，body'）.stop（）.animate({
'scrollTop'：$target.offset（）.top-100
}，1000，'swing'，函数（）{
window.location.hash=目标；
$（文档）.on（“滚动”，onScroll）；
});
});
});
我实际上不明白这个问题。
打开开发工具我有一些错误，但是你网站上的平滑滚动对我来说很好

看看我做的这个JSFIDLE：


HTML

<ul class="nav">
  <li><a class="scroll" href="#section_home">Home</a></li>
  <li><a class="scroll" href="#section_about">About</a></li>
  <li><a class="scroll" href="#section_team">Team</a></li>
  <li><a class="scroll" href="#section_gallery">Gallery</a></li>
  <li><a class="scroll" href="#section_contact">Contact</a></li>
</ul>

<section id="section_home">
  <h1>Home</h1>
</section>
<section id="section_about">
  <h1>About</h1>
</section>
<section id="section_team">
  <h1>Team</h1>
</section>
<section id="section_gallery">
  <h1>Gallery</h1>
</section>
<section id="section_contact">
  <h1>Contact</h1>
</section>

如果调用
位置的元素不存在，则可能会出现错误…因此记录
currentLink.attr（“href”）
-（
console.log（currentLink.attr（“href”））
）和
console.log（this.hash）的值
在调用
位置之前
找出导致故障的元素error@ArunPJohny
（console.log（currentLink.attr（“href”））
输出，所有三个标记，
#about，#home，#porfolio
。和
console.log（目标）
输出，我点击的每个标记。
#HOME，about，…
在控制台中抛出错误并打印值之前，问题在html中，您有以下标记用于
联系人
链接
您缺少HREF中的
，可能我太累了，但我无法理解out@henkvanBoeijen我试着把它作为一个答案，但是没有
    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a[href^="#"').each(function () { //added a[href^="#"] so that the loop only iterates over the elements with the ID tag
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        console.log(currentLink.attr("href")); //log
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }

      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"], .arrow-down-wrapper a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
          console.log(target);
          $('html, body').stop().animate({
                    'scrollTop': $target.offset().top - 100
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });

            });
        });

<ul class="nav">
  <li><a class="scroll" href="#section_home">Home</a></li>
  <li><a class="scroll" href="#section_about">About</a></li>
  <li><a class="scroll" href="#section_team">Team</a></li>
  <li><a class="scroll" href="#section_gallery">Gallery</a></li>
  <li><a class="scroll" href="#section_contact">Contact</a></li>
</ul>

<section id="section_home">
  <h1>Home</h1>
</section>
<section id="section_about">
  <h1>About</h1>
</section>
<section id="section_team">
  <h1>Team</h1>
</section>
<section id="section_gallery">
  <h1>Gallery</h1>
</section>
<section id="section_contact">
  <h1>Contact</h1>
</section>

<a class="scroll" href="#section_whatever_you_want">
    <i class="fa fa-chevron-down"></i>
</a>

$(document).ready(function() {

  $(".scroll").on("click", function() {
    //event.preventDefault();
    var el = $(this).attr("href");
    $('html, body').animate({
      scrollTop: $(el).offset().top
    }, 2000);
  });

});