Question

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

导航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相同name 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 scroll to element

要动态选择data-id与所点击元素的id匹配的div，您可以按属性动态选择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>

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

3 个答案: