JQueryスクロールDRY

Question

スクロールアクションを適用する4つのdivがあります。

各divで繰り返してもコードは機能しますが、イベントを処理するコードブロックが1つだけ必要です。私が今使用したいコードはこれです

$('nav').on('click', function(){ 
$('html, body').animate({ scrollTop: $('#about').offset().top}, 1000) 
}); 

- -

var navText = $('.nav-text').on('click', function() { 
      var txt = $(this).attr('id'); 
      var id = '#' + txt; 
      console.log(id); 
     }); 
$('nav').on('click', function(){ 
$('html, body').animate({ scrollTop: $(navText).offset().top}, 1000) 
}); 

上記のコードが適用され、リンクがページをクリックすると

動作するコードはこれですわずか数ピクセル下がります。

ありがとうございました。

乾杯、

ライアン

Answer 1

の問題がいくつかあります：

• はあなたの変数navTextをクリックハンドラではなく、あなたが構造から
• を探しているidが含まれていますあなたのコードの私はあなたが問題につながる重複IDを使用していると仮定します

あなたのマークアップこのコードはあなたのために働く可能性が知らず

：ここでは `.nav-text`と` nav`は何

HTML

<a href="#" data-id="id1" class="nav-text"></a> 

JS

$('.nav-text').on('click', function(e) { 
    e.preventDefault(); 
    var dataId = $(this).data('id'); 
    $('html, body').animate({ 
    scrollTop: $('#' + dataId).offset().top 
    }, 1000) 
});