navigate to the element that has an id same to the data-id data attribute of the click element

Question

I'm currently making a like "one page" concept web page and I came across where I want the user view navigated to the specified element that its id is equal to the data-id attribute of the currently click element.

navigation div (i prefer use div for my own requirements)

<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>

and the content elements

<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>

so if click the div that has an id of "test1" then navigate to the element that has an id of test1 (scroll up/down, wherever that element located at that has an id same to the currently click element data attribute name data-id) Any ideas how to make it?

Michał Dudak · Answer 1 · 2015-08-02T15:33:30.567

Actually it will be much easier to do the opposite - have the data-id attributes on the navigation and simple id on the element you want to scroll to. This way, it would be accomplished by setting the location.hash to whatever the data-id of the button is:

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

What's more, it'll allow you to create another navigation if necessary (you would not be able to to this with your solution as IDs have to be unique).

As a sidenote, if you did not have to use divs for navigation, there could be no JS at all:

<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>

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

See jQuery scroll to element

To dynamically select the div with the data-id matching the id of the clicked element, you can dynamically select the div by attribute div[data-id=" + id + "]"

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

edited May 23 '17 at 12:06

Community

1
1

answered Aug 02 '15 at 15:23

FuzzyTree

30,038
3
46
73

its shown the element on top, how to make its view on center? – Juliver Galleto Aug 02 '15 at 15:39
1

@CodeDemon if each div has the same height you can subtract a constant value i.e. `scrollTop: $("div[data-id=" + id + "]").offset().top - 50` otherwise subtract something like `...offset().top - $("div[data-id=" + id + "]").height()/2` – FuzzyTree Aug 02 '15 at 15:41

Ori Drori · Answer 3 · 2015-08-02T15:39:46.683

1

Try to use anchor instead, ie normal a with href, which points to the 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>

edited Aug 02 '15 at 15:39

answered Aug 02 '15 at 15:24

Ori Drori

145,770
24
170
162

navigate to the element that has an id same to the data-id data attribute of the click element

3 Answers3