javascript - 使用数据属性滚动到元素

Question

我正在尝试弄清楚如何使用数据属性让元素滚动到特定元素(如果它与 ID 匹配)而不是使用 anchor 标记。这就是我的工作。

一旦用户点击一个按钮，它将显示内容并滚动到与数据属性匹配的特定元素。我似乎无法让它滚动

<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

将 # 连接到 id 以创建正确的选择器。也使用 .offset().top 因为 offset()是一个返回包含元素当前位置的对象的函数。然后我们可以使用 top 键访问它。

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

DEMO