私はナビゲーションメニューを持っていて、それをクリックすると特定の部門に行く

Question

この質問は既に回答済みです。私は他の答えを探してみましたが、それでも解決できませんでした。私はjQueryを初めて使っています。

私はナビゲーションメニューを持っていますので、それをクリックすると特定のdivに移動します。

ここに私のコードです：

HTML

<div class="overlay" id="nav-overlay"> 
    <nav class="overlay-menu"> 
    <ul> 
     <li ><a class="nav-link" href="#" data-target="intro">Home</a></li> 
     <li><a class="nav-link" href="#" data-target="about-section">About</a></li> 
     <li><a class="nav-link" href="#" data-target="hero-section-1">Projects</a></li> 
     <li><a class="nav-link" href="#" data-target="contact-section">Contact</a></li> 
    </ul> 
    </nav> 
</div> 

とjQuery：

// Scroll to div 

$(document).on('click','.nav-link', function(event) { 
    event.preventDefault(); 
    var target = this.getAttribute('data-target'); 
    $('html, body').animate({ 
     scrollTop: $(target).offset().top 
    }, 2000); 
}); 

私は何も起こりませんリンクをクリックして、私のコンソールで、私はこのエラーを取得する場合：

Uncaught TypeError: Cannot read property 'top' of undefined

A NYのヘルプは理解されるであろう:)

Answer 1

は、あなたがそのセレクタとターゲットを事前に修正する必要があります - あなたに感謝@fordareh

// if the target is a class 
$('.' + target).offset().top 

// if the target is a id 
$('#' + target).offset().top