id-overview.js

function html(strings, ...expressions) {
  return document.createRange().createContextualFragment(
    strings.reduce((output, string, index) =>
      output + expressions[index - 1] + string
    )
  )
}

document.body.append(
  html`
    <style>
      [data-overview] {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, .8);
        padding: 1em;
        max-height: 100vh;
        overflow-y: auto;
      }
      [data-overview] a {
        color: black;
      }
      :target {
        background: rgba(255, 255, 0, .1);
      }
    </style>
    <nav data-overview>
      <ul>
        ${
          Array.from(
            document.querySelectorAll('[id]'),
            ({id}) => `<li><a href="#${id}">${id}</a>`
          ).join('')
        }
      </ul>
    </nav>
  `
)