Поведение по умолчанию с помощью вкладок помещает ссылки за липкий заголовок

Question

У меня есть липкий заголовок на моем сайте. У меня также есть стили фокуса на ссылках. Когда пользователь перемещается по ссылкам на веб-сайте (особенно в обратном направлении, нажимая клавиши shift + tab), иногда эти целевые ссылки находятся за закрепленным заголовком, и пользователь не может видеть, на что он нацелен.

Я пытался Решите это, добавив моих собственных слушателей на 'focus', чтобы прокрутить ссылки в окне просмотра. Все хорошо, за исключением того, что теперь, когда я нажимаю на ссылку, mousedown меняет фокус, запускает прокрутку, и происходит перемещение мышью после перемещения ссылки, то есть .... событие click никогда не срабатывает на этих ссылках, и они не go где угодно: (

Как я могу решить эту проблему?

Код без добавленного JS. Попробуйте перебрать ссылки назад и посмотреть, как они исчезают:

header {
  position: sticky;
  top: 0;
  background: white;
  font-size: 2em;
  padding: .5em 0;
}

div {
  height: 135px;
}

a {
  display: block;
}

<header>Fancy Title</header>
<div>Some Space</div>
<a href="#1">One</a>
<div>Some Space</div>
<a href="#2">Two</a>
<div>Some Space</div>
<a href="#3">Three</a>
<div>Some Space</div>
<div>Some More Space</div>

И вот с прокруткой, но теперь нажатие не работает:

var links = document.querySelectorAll('a')

links.forEach(function (link) {
  link.addEventListener('focus', function (event) {
    // if (focus caused by click) return 'Don't do anything.'
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
    var y = link.getBoundingClientRect().top + scrollTop - 52
    return window.scroll({top: y - 20, behavior: 'smooth'})
  })
})


// Just to demonstrate that the clicks don't happen

links.forEach(function (link) {
  link.addEventListener('click', function (event) {
    link.style.background = '#' + Math.floor(Math.random()*16777215).toString(16)
  })
})

header {
  position: sticky;
  top: 0;
  background: white;
  font-size: 2em;
  padding: .5em 0;
}

div {
  height: 135px;
}

a {
  display: block;
}

<header>Fancy Title</header>
<div>Some Space</div>
<a href="#1">One</a>
<div>Some Space</div>
<a href="#2">Two</a>
<div>Some Space</div>
<a href="#3">Three</a>
<div>Some Space</div>
<div>Some More Space</div>