1

我正在研究一页滚动导航。它应该在滚动或单击时将类“活动”从一个菜单带到另一个菜单，但是每次单击任何菜单项时都会在控制台中出现此错误：

类型错误：$(...).offset() 未定义

以下是我的代码片段；我在原始代码中使用 jQuery 3.4.1。

function calculateScroll() {
      var contentTop      =   [];
      var contentBottom   =   [];
      var winTop      =   $(window).scrollTop();
      var rangeTop    =   200;
      var rangeBottom =   500;
      $('.site-main-menu').find('a').each(function(){
        contentTop.push( $( $(this).attr('href') ).offset().top );
        contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
      })
      $.each( contentTop, function(i){
        if ( winTop > contentTop[i] - rangeTop && winTop < contentBottom[i] - rangeBottom ){
          $('.site-main-menu li a')
          .removeClass('active')
          .eq(i).addClass('active');        
        }
      })
    };
    
    $(document).ready(function(){
      calculateScroll();
      $(window).scroll(function(event) {
        calculateScroll();
      });
      $('.site-main-menu li').click(function() {  
        $('html, body').animate({scrollTop: $(this.hash).offset().top - 80}, 800);
        return false;
      });
    });jQuery
.menu-wrapper {position: fixed; top: 0}
.site-main-menu {list-style: none; padding: 0}
.site-main-menu li {display: inline-block;}
.site-main-menu li a {padding: 5px 10px; color: #fff; background: #000; text-decoration: none}
.site-main-menu li a.active {background-color: red}
section {padding: 50px 10px; border: 1px solid #ccc; margin-bottom: 20px; margin-top: 40px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-wrapper">
   <ul class="site-main-menu">
       <li><a class="active" href="#sec1">Menu 1</a></li>
       <li><a href="#sec2">Menu 2</a></li>
       <li><a href="#sec3">Menu 3</a></li>
    </ul>
</div>

<section id="sec1">
  <h3>Section 1</h3>
</section>

<section id="sec2">
  <h3>Section 2</h3>
</section>

<section id="sec3">
  <h3>Section 3</h3>
</section>

4

2 回答 2

0

发生 TypeError 是因为this.hash此处未定义，因此$(this.hash).offset()也未定义。

$('.site-main-menu li').click(function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 80}, 800);
    return false;
});
于 2020-08-15T07:59:15.030 回答
0

我能够使用下面的 JQuery 来处理错误。

$(document).ready(function() {
  $('.site-main-menu li a').click(function(e) {
   e.preventDefault();
      $('html, body').animate({
          scrollTop: $($(this).attr('href')).offset().top,
        },
        1000,
        'linear'
      )
    });
  });
.menu-wrapper {position: fixed; top: 0}
.site-main-menu {list-style: none; padding: 0}
.site-main-menu li {display: inline-block;}
.site-main-menu li a {padding: 5px 10px; color: #fff; background: #000; text-decoration: none}
.site-main-menu li .active {background-color: red}
section {padding: 50px 10px; border: 1px solid #ccc; margin-bottom: 20px; margin-top: 40px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-wrapper">
   <ul class="site-main-menu">
       <li><a class="active" href="#sec1">Menu 1</a></li>
       <li><a href="#sec2">Menu 2</a></li>
       <li><a href="#sec3">Menu 3</a></li>
    </ul>
</div>

<section id="sec1">
  <h3>Section 1</h3>
</section>

<section id="sec2">
  <h3>Section 2</h3>
</section>

<section id="sec3">
  <h3>Section 3</h3>
</section>

于 2020-08-17T10:08:50.893 回答