当我滚动页面时，javascript的问题是计数

页面滚动时发现问题。如果我滚动页面，会自动统计javascript错误。 只有当我滚动页面时才发现错误。否则，没有发现错误

未捕获的TypeError:无法读取未定义的属性“top”：

我的Html结构，基本上，我想，当我的页面滚动，然后在我的导航栏中显示活动类&当节更改，然后活动更改

<nav class="my-main-menu navbar navbar-expand-lg navbar-light">
   <div class="container">
      <div class="collapse navbar-collapse" id="main-menu">
         <ul class="navbar-nav nav-content">
            <li class="nav-item">
               <a href="#demo" class="nav-link my-link">Work</a>  
            </li>
            <li class="nav-item">
               <a href="#about" class="nav-link my-link">About Me</a>  
            </li>
            <li class="nav-item">
               <a href="#blog-area" class="nav-link my-link">Blog</a>  
            </li>
            <li class="nav-item">
               <a href="contact-us.html" class="nav-link my-link">Contact</a>  
            </li>
         </ul>
         <!--navbar-nav-->
      </div>
      <!--collapse end-->
   </div>
   <!--end contaner-->
</nav>
<!--navbar end-->
<!-- hero area-->
<section id="hero">
   <div class="container">
   </div>
   <!--end container-->
</section>
<!--demo -->
<section id="demo">
   <div class="container">
   </div>
   <!-- end container -->
</section>
<!-- about -->
<section id="about">
   <div class="container">
   </div>
   <!-- end container -->
</section>
<!-- review -->
<section id="review">
   <div class="container">
   </div>
   <!-- end container -->
</section>
<!-- blog -->
<section id="blog-area">
   <div class="container">
   </div>
   <!-- container end -->
</section>

该问题是由于JavaScript和HTML的以下部分引起的：

$（'#主菜单.我的链接'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（“#主菜单.navbar nav.nav item.nav link”）.removeClass（“actived”）；
currLink.addClass（“actived”）；
}
否则{
currLink.removeClass（“actived”）；
}
});

jQuery试图获取每个主菜单链接元素，并基于

href

值获取另一个HTML元素。但是，上面链接的

href

值没有引用元素，因此会引发错误

要解决此问题，您需要更改以下行：

$（'#主菜单.我的链接'）。每个（函数（）{
//到
$（'#主菜单。我的链接[href^=“#”]”）。每个（函数（）{

---

这确保了只有主菜单链接元素（具有以哈希开头的

href

值）被选中。

我注意到，在关闭

$（'a'）后缺少分号。您的
文档中的每一个
。就绪
。嗨，Uttsho，您能分享更多关于HTML结构的信息吗？页面上似乎有未定义的内容，滚动事件侦听器一次又一次地调用它。@javascript中有趣的名称，分号是可选的。@SebastianVittersø这就是为什么它对我来说很突出。
$(document).ready(function () {
    $(document).on("scroll", onScroll);
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        $('a').each(function () {
            $(this).removeClass('actived');
        })
        $(this).addClass('actived');
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2}, 500, 'swing', function () {
                window.location.hash = target;$(document).on("scroll", onScroll);
            });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#main-menu .my-link').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#main-menu .navbar-nav .nav-item .nav-link').removeClass("actived");
            currLink.addClass("actived");
        }
        else{
            currLink.removeClass("actived");
        }
    });
};

<nav class="my-main-menu navbar navbar-expand-lg navbar-light">
   <div class="container">
      <div class="collapse navbar-collapse" id="main-menu">
         <ul class="navbar-nav nav-content">
            <li class="nav-item">
               <a href="#demo" class="nav-link my-link">Work</a>  
            </li>
            <li class="nav-item">
               <a href="#about" class="nav-link my-link">About Me</a>  
            </li>
            <li class="nav-item">
               <a href="#blog-area" class="nav-link my-link">Blog</a>  
            </li>
            <li class="nav-item">
               <a href="contact-us.html" class="nav-link my-link">Contact</a>  
            </li>
         </ul>
         <!--navbar-nav-->
      </div>
      <!--collapse end-->
   </div>
   <!--end contaner-->
</nav>
<!--navbar end-->
<!-- hero area-->
<section id="hero">
   <div class="container">
   </div>
   <!--end container-->
</section>
<!--demo -->
<section id="demo">
   <div class="container">
   </div>
   <!-- end container -->
</section>
<!-- about -->
<section id="about">
   <div class="container">
   </div>
   <!-- end container -->
</section>
<!-- review -->
<section id="review">
   <div class="container">
   </div>
   <!-- end container -->
</section>
<!-- blog -->
<section id="blog-area">
   <div class="container">
   </div>
   <!-- container end -->
</section>