Zu Element mit Datenattributen scrollen

Question

Ich versuche herauszufinden, wie ich das Element mit Datenattributen zu einem bestimmten Element scrollen lassen kann, wenn es mit der ID übereinstimmt, anstatt Anchor-Tags zu verwenden. Hier arbeite ich.

Sobald der Benutzer auf eine Schaltfläche klickt, wird der Inhalt angezeigt und scrollt zu dem bestimmten Element, das den Datenattributen entspricht. Ich kann nicht scheinen, um es

<div class="container"> 
    <div class="post" data-id="content-one"> 
     post one 
    </div> 
    <div class="post" data-id="content-two"> 
     post two 
    </div> 
</div> 
<div class="container-two"> 
    <div id="content-one" class="post-content" > 
     content one 
    </div> 
    <div id="content-two" class="post-content" > 
     content two 
    </div> 
</div> 

$(".container .post").on('click', function() { 
    var data_id = $(this).data('id'); 
    $('.post-content').each(function() { 
     var el = $(this); 
     if (el.attr('id') == data_id) 
      el.show(); 
     else 
      el.hide(); 
    }); 
    $('html, body').animate({ 
     scrollTop: $(data_id).offset.top() 
    }, 'slow'); 
}); 

https://jsfiddle.net/clestcruz/vf4ufg6b/

Answer 1

Concatenate ein # auf die ID einen richtigen Wähler zu machen bewegen zu machen. Auch die Verwendung .offset().top weil offset() ist eine Funktion, die ein Objekt zurückgibt, das die aktuelle Position des Elements enthält. Dann können wir mit dem Schlüssel top darauf zugreifen.

$('html, body').animate({ 
    scrollTop: $('#' + data_id).offset().top 
}, 'slow'); 

DEMO