using scrollIntoView function to specific HTML tag

Question

I'm using scrollIntoView function to click on a link and have it jump to a different part of my web app. The issue i am having is that i dont know how to target an HTML element called 'identifier'

so my html looks like...

<div class="subpara" identifier="2b">
            <num value="b">(B)</num>
            <content>some conent</content>
</div>

I want to be able to target the 'identifier' 2b in this case

i tried using:

  onClickOutlineNav(id) {
    let element = document.getElementById(id);
    //scroll to identifier
    element.scrollIntoView();
  }

and it doesnt seem to be working..any ideas?

Possible duplicate of https://stackoverflow.com/questions/45742611/scroll-to-a-certain-element-of-the-current-page-in-angular-4 — Will Alexander, Aug 28 '19 at 14:43
If you add `id="zzz"` you should be able to just do `location.hash="zzz"` — mplungjan, Aug 28 '19 at 14:44

Michael · Accepted Answer · 2019-08-28T14:52:10.693

3

You're using incorrect html tag syntax, which would be your first problem.

<div class="subpara" id="2b">

The getElementById function looks for the "id" property on html tags, not the "identifier" property.

If you insist on using the "identifier" property, you can query for it like so:

let element = document.querySelector('[identifier="2b"]');

or more generically:

let element = document.querySelector(`[identifier="${id}"]`);

edited Aug 28 '19 at 14:52

answered Aug 28 '19 at 14:44

Michael

581
2
8

how would i use the identifier property? – jeremy Aug 28 '19 at 14:46
How would you use it in what way? You want to query for an element by the "identifier" property instead of the "id" property? – Michael Aug 28 '19 at 14:48

using scrollIntoView function to specific HTML tag

1 Answers1