Reference an element by href hash without using jQuery

Question

Say I have an element <a href="/foo#bookmark">. I want to reference this element by its hash, which I can do using jQuery. How would I do this only using JavaScript?

Example code:

<a id="foo" href="/foo#bookmark" onclick="exampleFunction(this)">Some text</a>

<script>
/**
 * @param {Element} el
 */
function exampleFunction(el) {
    let bookmarkHash = el.hash,
        $bookmarkElement = jQuery(bookmarkHash);

    console.info($bookmarkElement.offset().top);
}
</script>

Here jQuery(bookmarkHash) references the original <a> so I can get the offset of the element. How can I do this in pure JavaScript?

You're passing in the element to the fuction, just use $bookmarkElement = $(el); — Rory McCrossan
– Rory McCrossan, Commented Sep 9, 2016 at 19:53
@ebakunin you are still passing the element in, aren't you? Why do you need to reference the element by it's hash when you already have it? — VLAZ
– VLAZ, Commented Sep 9, 2016 at 19:55

colecmc · Accepted Answer · 2016-09-09 20:03:26Z

1

In your script jQuery(bookmarkHash); jquery is only returning a selector. So you can swap that out easily.

/**
 * @param {Element} el
 */
function exampleFunction(el) {
    let bookmarkHash = el.hash,
        $bookmarkElement = document.querySelector(bookmarkHash);

  /* you will need to figure out the elements offset bit */
    console.info($bookmarkElement);
}

<a id="foo" href="#bookmark" onclick="exampleFunction(this)">Some text</a>
<div id="bookmark">Hello</div>

edited Sep 9, 2016 at 20:03

answered Sep 9, 2016 at 19:57

colecmc

3,3283 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ebakunin Over a year ago

document.querySelector(bookmarkHash) is what I was looking for. I did not explain my problem well. Thanks for getting me the answer anyway!

colecmc Over a year ago

Glad I could help.

Collectives™ on Stack Overflow

Reference an element by href hash without using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related