导航到具有与 click 元素的 data-id 数据属性相同的 id 的元素

Question

我目前正在制作一个类似“一页”概念网页，我遇到了我希望用户视图导航到指定元素的地方，它的 id 等于当前点击元素的 data-id 属性。

导航 div（我更喜欢使用 div 来满足我自己的要求）

<div class="extend clear navigator">
    <div class="navigator_nav extend align_left margin_right5px" id="tes1">Test 2</div>
    <div class="navigator_nav extend align_left margin_right5px" id="tes2">Test 2</div>
    <div class="navigator_nav extend align_left margin_right5px" id="tes3">Test 3</div>
</div>

和内容元素

<div class="page_content container extend clear" data-id="test1">Test 1 container</div>
<div class="page_content container extend clear" data-id="test2">Test 2 container</div>
<div class="page_content container extend clear" data-id="test3">Test 3 container</div>

因此，如果单击 ID 为“test1”的 div，然后导航到 ID 为 test1 的元素（向上/向下滚动，该元素所在的任何位置的 ID 与当前单击的元素数据属性名称 data- id）任何想法如何制作？

Answer 1

实际上，做相反的事情会容易得多 - 在导航上使用data-id属性，在要滚动到的元素上使用简单id 。 这样，它将通过将location.hash设置为按钮的任何data-id来完成：

$(".navigator_nav").click(function (elem) {
    location.hash = $(elem).data(id);
}

更重要的是，它允许您在必要时创建另一个导航（您将无法使用您的解决方案来做到这一点，因为 ID 必须是唯一的）。

作为旁注，如果您不必使用 div 进行导航，则可能根本没有 JS：

<div class="extend clear navigator">
    <a class="navigator_nav extend align_left margin_right5px" href="#test1">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#test2">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#test3">Test 3</a>
</div>

Answer 2

参见jQuery 滚动到元素

动态地选择与在div data-id匹配的id的点击的元素，可以动态地选择由属性在div div[data-id=" + id + "]"

$(".navigator_nav").click(function() {   
    var id = $(this).attr('id');    
    $('html, body').animate({
        scrollTop: $("div[data-id=" + id + "]").offset().top
    }, 2000);
});

Answer 3

尝试改用锚点，即普通的带有 href 的 a，它指向 id：

<a class="extend clear navigator">
    <a class="navigator_nav extend align_left margin_right5px" href="#tes1">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#tes2">Test 2</a>
    <a class="navigator_nav extend align_left margin_right5px" href="#tes3">Test 3</a>