jQueryを使わずに要素をhref hashで参照する

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>