What is the event to listen to for jumping within page without reloading?

Issue

I'm writing a small documentation, html being like:

<dl class="commands">
  <dt id="commandA">Command A</dt>
  <dd class="description">This command makes you happy.</dd>
  <dt id="commandB">Command B</dt>
  <dd class="description">This command makes you even happier.</dd>
</dl>

I thought it would be nice if accessing mydoc.html#commandA highlights where the description for command A is written, and wrote the following JavaScript:

(function(){
  window.addEventListener('load', emphCmd);
  
  function emphCmd(){
    var loc = window.location.href;
    if (/\.html#.*$/.test(loc)){
      var cmd = loc.split("#")[1]; // "commandA" for mydoc.html#commandA
      var cmdElm = document.getElementById(cmd);
      if (cmdElm !== null){ // if element with that id is found,
        cmdElm.style.backgroundColor = "#eeeeaa"; // highlight its background.
      }
    }
  }
})();

This works, but only when the page is loaded (well, of course. I said do this on load). The cases where this script does nothing includes : i) when I manually add #commandA to the address bar in the browser and press Enter (without F5 --- reloading) ii) Jumping within page with <a> tag.

I want it to be highlighted in either case. For the <a href="#commandA">, I could probablyanchor.addEventListener('click',emphCmd), although that does not seem very neat.

Is there an event for these "jumping within page"? If not, what are the good ways to achieve this effect?

Solution

There isn't one single event that would cover your use-case, but since you're just attempting to style a targeted element, you can actually leverage the :target CSS pseudo-class. The MDN documentation has a pretty good description and some examples:

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section2: http://example.com/folder/document.html#section2 The anchor can be any element with an id attribute, e.g. <h1 id="section2"> in our example. The target element h1 can be represented by the :target pseudo-class.

The :target pseudo-class also works with named anchors (i.e. <a name="some-id-value"></a>), so it's backward-compatible with older markup. You will notice, though, that using a named anchor is not 100% the same - the targeted item receives the rule, and an anchor is an inline element.

Here's @KingKing's example, included as a code snippet:

:target {
  background: #eeeeaa;
}

<a href="#commandA">Command A</a>
<a href="#commandB">Command B</a>
<a href="#commandC">Command C</a>
<dl class="commands">
  <dt id="commandA">Command A</dt>
  <dd class="description">This command makes you happy.</dd>
  <dt id="commandB">Command B</dt>
  <dd class="description">This command makes you even happier.</dd>
  <dt><a name="commandC">Command C</a></dt>
  <dd class="description">This command makes you sad, since it's using a named anchor.</dd>
</dl>

The one caveat is that IE8 and under do not support the :target selector. You can get around that by using a polyfill such as Selectivir or IE9.js.

Answered By - Tieson T.