Scrolling to an id with a specific class

Question

Is it possible to scroll to an element with a specific id and a specific class. For example a simple script for smooth scrolling to a specific id is

$(function () {
     $('a[href*="#"]').click(function () {
        var $target = $(this.hash);
        $target = $target.length ? $target : $('html');
        var targetOffset = $target.offset().top;
        $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'});
        return false;
     });
});

This is useful if you have something like

<div id="space-red"></div>
<div id="space-blue"></div>
<div id="space-green"></div>

However if you have a page such as

<div id="space-red" class="class1"></div>
<div id="space-blue" class="class1"></div>
<div id="space-red" class="class2"></div>
<div id="space-blue" class="class2"></div>
<div id="space-green" class="class1"></div>

Would you be able to navigate between the two space-red or space-blue ids by differentiating between the classes they have assigned to them?

Why not? This is how most of portfolio pages work. Unique ID — RanchiRhino, May 31 '16 at 13:49
I don't think it is... you can't have multiple IDs on the same page. `getElementById` returns **one** item for a reason. Instead, just use multiple classes. — evolutionxbox, May 31 '16 at 13:50
Element ID's should be unique within the entire document. http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme — RanchiRhino, May 31 '16 at 13:52
You could get all elements with the `class1` class and then use the IDs to differentiate them, but why do this? Isn't using the ID in the first place different enough? — Sylvan D Ash, May 31 '16 at 13:52
@RanchiRhino Element IDs should be unique BUT HTML will still work even if they aren't unique and jQuery will return an array instead of a single item — Sylvan D Ash, May 31 '16 at 13:54
@SylvanDAsh jquery will also only return one item when using `$('#id')` : https://jsfiddle.net/gkp7w9s4/ — Pete, May 31 '16 at 14:07
The above jsfiddle prints out 5 times though...but from my experience with jQuery on Chrome & Firefox, it will return an array if you have more than 1 element with the same ID — Sylvan D Ash, May 31 '16 at 15:39

score 1 · Answer 1 · edited May 31 '16 at 14:02

Ids must be unique, try change id to data-id, here is an example:

var target = $('div[data-id="space-red"].class2').offset().top;

console.log(target);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="space-red" class="class1"></div>
<div data-id="space-blue" class="class1"></div>
<div data-id="space-red" class="class2"></div>
<div data-id="space-blue" class="class2"></div>
<div data-id="space-green" class="class1"></div>

score 0 · Answer 2 · answered May 31 '16 at 13:59

0

The problem is that you use the classes as if they were IDs and IDs as if they were classes. The IDs are unique for the entire document and therefore should only be one.

You need to think the other way round and logic will correctly.

answered May 31 '16 at 13:59

Lucas Frezzini

1
4

**This is really a comment, not an answer.** I appreciate that you may not yet have sufficient reputation to leave comments but please do not use the answer system as a replacement. Gaining reputation is fairly easy and only requires a little effort on your part. Thanks! – Paulie_D May 31 '16 at 15:15

score 0 · Answer 3 · answered May 31 '16 at 14:03

First, Ids must be unique, but you can use class to control and select element or other attribute. In this way, select the element with the class not flagged, and add a flag on end. Something like:

$(function () {
 $('a[href*="#"]').click(function () {
    var $target = $(this.hash + ':not(.flag)');
    $target = $target.length ? $target : $('html');
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, {duration: 1500, easing: 'easeInOutCubic'});

    $('.flag').removeClass('flag');
    $target.addClass('flag');


    return false;
 });});

Scrolling to an id with a specific class

3 Answers3