Using tabindex=0 targeted object centered, want it on top

I have a long list of keywords with a short text added to each keyword, a glossary, and the div of each keyword has a tabindex=”0″ attribute added to it. Problem: when I jump with ‘tab’-key from keyword to keyword, the targeted element with the sequential keyword appears vertically centered on screen, so with long explanatory texts the title and bottom text are not visible. There is not a jump like with target # to the top of the window. How can I get the tab object vertically aligned to the top, as with href=#? So it is all about positioning, I guess.

Used div for keyword:

.ov {
  text-indent: 0;
  vertical-align: top;
  border-radius: 15px;
  margin: 20px;
  height: auto;
  width: 70%;
  outline: none;
  padding: 50px;
  border-radius: 22px;
  background-color: #fff;
  -webkit-box-shadow: 9px 9px 15px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 9px 9px 15px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 9px 9px 15px 0px rgba(0, 0, 0, 0.5);

.ov is a child of the next two nested elements:

.context {
  position: fixed;
  overflow: hidden;
  width: auto;
  height: auto;
  z-index: 70;
  top: 130px;
  left: 260px;
  right: 5%;
  bottom: 30px;

.context1 {
  width: 104.5%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;

Hope anyone has a clue. Many, many thanks!