導航到具有與 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>