不使用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只返回一个选择器。所以你可以轻松地交换它。

＆＃13;

＆＃13;

/**
 * @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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;