データ属性を取得しようとしていますが、未定義です

Question

更新：申し訳ありませんが、これは私の間違いでした。私はデータターゲットの間違ったIDを私がスクロールしたいdivの実際のIDよりも呼び出すことになっていたので、エラーです！ 私は信じられないほど馬鹿だと思って、みんなの時間を無駄にしてすみません。私は質問を削除しますが、それは私をさせません。

---

私は、任意のターゲットのdivに任意のdiv要素からsmoothscrollするために、単純なJS関数を作成することができるようにしたいです。

スムーススクロールクラスが追加され、data-target="#elementID"で指定されたターゲットdivを持つ場合、これを行う方法です。

<div class="smooth-scroll" data-target="targetDiv">Source link</div> 

// Elsewhere on the page 
<div id="targetDiv"></div> 

しかし、私は、以下の機能を使用しようとすると、ソースをクリックしたときに、私が見るすべては、私は、問題はそれがtargetの値を取得していないということだと思いますUncaught TypeError: Cannot read property 'top' of undefined

$('.smooth-scroll').click(function() { 
    event.preventDefault(); 
    var target = this.getAttribute('data-target'); 
    $('html').animate({ 
     scrollTop: $('#'+target).offset().top, 
     easing: 'easeInOutQuart'  
    }, 1000); 
}); 

です。これは正しいのですか、それとも何か他にありますか？

私はjsFiddleを作成しようとしたとき、それは動作します - だから地球上で何が起こっているのですか？ https://jsfiddle.net/rv0nmb44/

Answer 1

最初のdivとターゲットdiv（青色のボックス）の間に中間のdivブロックを追加しました。ご覧のとおり、正しくtopプロパティを取得しているようです。

これがうまくいかない場合は、動作していないコードのライブスニペットのような詳細をお知らせください。

$('.smooth-scroll').click(function(event) { 
 
    event.preventDefault(); 
 
    var target = $(this).data('target'); 
 
    var top = $('#'+target).offset().top; 
 
    console.log(top); 
 
    $('html').animate({ 
 
     scrollTop: top, 
 
     easing: 'easeInOutQuart'  
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="smooth-scroll" data-target="targetDiv">Source link</div> 
 

 
<div style="height: 300px; background-color: blue;"></div> 
 

 
<div id="targetDiv"></div>