无法读取属性'top'未定义的Jquery/javascript

问题是代码不够具体。循环遍历列表中的所有项目，即#标记所在的所有链接，以及指向其他页面的链接。这就是为什么我得到错误的顶部没有定义，它正在寻找的项目不存在。a[href^="#"'添加后，循环只迭代带有#ID标记的项。

评论了我所做的更改

//当点击标题中的链接时，平滑过渡到scons

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

这是一种样式，因此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样式表中的值集，但我不记得如何读取。

我实际上并没有遇到这个问题。打开开发工具，我有一些错误，但你的网站上的平滑滚动对我来说很好。

看看我做的这个jsfiddle：

https://jsfiddle.net/p4x3d2dn/1/

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>

添加其他链接（如向下滚动箭头）只需将正确的href属性添加到.woll标签即可：

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

如果您有自定义生成的部分，并且您无法控制DOM，则必须采取稍微不同的方法

这就是您需要的所有javascript：

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