Link to non-heading id does not go to the correct location

[hamishwillee]

• I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

Add an an anchor like <strong id="myanchor">This is strong myanchor</strong> OR <span id="myanchor">This is a span with id called myanchor</span> somewhere in any text.
Then link to it using [Link to anchor](#myanchor). Given sufficient room the page will scroll further down that it should, hiding your anchor text off screen.

Note that anchors in headings work fine - but often you need to link to something that is not a heading, or which cannot have an anchor link.

What is expected?

A link to an id declared in a page should be navigated to. Here you can see the link is jumped to offscreen.

By comparison, if if the link is to a heading you get this

What is actually happening?

As above

Other relevant information

Further, while a heading with an id in the body will link correctly, if the heading is defined inside anotehr element like a table, then the linking no longer works properly - ie it is just like an id in a span.

[yzhang-gh]

Vuepress has added a 5rem padding-top to each heading (and then added some offset, e.g., -1.5rem margin-top to the <h1> and -3.5rem to the <h2>). We need to replicate this behavior with some custom CSS classes in order to get the correct target position.

https://stackoverflow.com/a/13117744/8682688