html. How to force the browser to indent from the top border when following anchor links?

Question

JavaScript

Given:
- there is a page (xhtml) with tabular data.
- the table has a "sticky" header (when scrolling the page, the table header sticks to the top edge and stays there). Approximately as in Yandex search results.
- there are anchor links in the table.
Problem:
When following an anchor link, the browser positions the page in such a way that the anchor we clicked on is at the very top of the page and falls under the "sticky" heading. Those. the desired data line is not visible - it is covered by the header.
Task:
make an anchor transition indented to the height of the heading.
Maybe someone already solved this problem?
So far I've come up with the following options:
1. move the anchor 1-2 lines lower, but this will break the logic, besides, the lines can be of different heights.
2. write a script that, when clicked, rewinds the page to a given offset, but here you need to calculate the offset somehow dynamically.
3. hang a click handler with a delay, which, after switching to the anchor, rewinds the page to the height of the header.

Answer 1

I can offer you this option. One element more, but without scripts.

Answer 2

not tested, but try giving the element a negative margin-top and an equal amount of positive padding-top

Answer 3

Have you tried jquery.scrollTo? (http://archive.plugins.jquery.com/project/ScrollTo)

Answer 4

https://www.youtube.com/watch?v=o6eJ1K_1CKA " from the 8th minute