JSFiddle - React, Tailwind, and code Playground

by Jools Chadwick

HTML

<div id="focusable" tabindex=0>
</div>
<div id="marker">
Stay here
</div>

CSS

body{height:50000px}
#focusable{
  position:absolute;
  top:25000px;
  background-color:green;
  height:100px;
  width:100px;
}
#marker{
  position:absolute;
  top:10000px;
  background-color:yellow;
  height:100px;
  width:100px;
}

JavaScript

$.fn.focusNo = function () {
    var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body).scrollLeft,
        y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body).scrollTop;

    this.focus();
    $(document).scrollLeft(x);
    $(document).scrollTop(y);
};

$(document).scrollTop(10000);

setTimeout(function(){
	$("#focusable").focusNo()
  $("#marker").text("Are you still there?")
},3000)