JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<a id="bar" href="http://facebook.com">Link near top</a>
<div></div>
<div>
    <button onclick="document.getElementById('bar').focus();">Focus top offscreen link</button>
    <button onclick="document.getElementById('foo').focus();">Focus bottom offscreen link</button>
</div>
<a id="foo" href="http://facebook.com">Link way down</a>
<div></div>
<p>END</p>

CSS

div {
    width: 150px;
    height: 2000px;
}

JavaScript

document.addEventListener('blur', function() {
  console.log("blur");
}, true);

document.addEventListener('focus', function() {
  console.log("focus");
}, true);

window.addEventListener('scroll', function() {
  console.log("scroll");
}, true);