javascript - 在不使用 jQuery 的情况下通过 href 哈希引用元素

Question

假设我有一个元素 <a href="/foo#bookmark"> .我想通过它的散列来引用这个元素，我可以使用 jQuery 来做到这一点。我如何只使用 JavaScript 来做到这一点？

示例代码:

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

在这里jQuery(bookmarkHash)引用原文<a>所以我可以获得元素的偏移量。我如何在纯 JavaScript 中执行此操作？

Answer 1

在您的脚本中 jQuery(bookmarkHash); jquery 只返回一个选择器。这样您就可以轻松更换它。

/**
 * @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>