當我單擊一頁滾動導航中的菜單項時，在控制台中觸發 TypeError

Question

我正在研究一頁滾動導航。 它應該在滾動或單擊時將 class 從一個菜單“激活”到另一個菜單，但每次單擊任何菜單項時都會在控制台中出現此錯誤：

類型錯誤：$(...).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>

Answer 1

發生 TypeError 是因為this.hash在這里未定義，因此$(this.hash).offset()也未定義。

$('.site-main-menu li').click(function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 80}, 800);
    return false;
});

Answer 2

我能夠使用下面的 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>