Using HREF to scroll above an element

Question

is there any way to scroll above an element? I mean, the following "H3" tag for example:

<h3 class="TEST" id="TEST">TEST</h3>
<p>TEXT</p>

I would like to jump a little above this "TEST" element using HREF:

<a href="#TEST">

like 5px above. is there any way to do it? Thanks

Does this answer your question? [Link to a section of a webpage](https://stackoverflow.com/questions/8424785/link-to-a-section-of-a-webpage) — Abhishek Bhagate, Jul 03 '20 at 20:27
@Abhishek Thanks, but I have already done an HREF and it works fine, I need to jump a little bit above this element. — Paul9002, Jul 03 '20 at 20:29
https://stackoverflow.com/questions/17534661/make-anchor-link-go-some-pixels-above-where-its-linked-to This post helped me. Thanks everyone. — Paul9002, Jul 03 '20 at 20:36

score 2 · Answer 1 · answered Dec 05 '22 at 14:50

I think solution you are looking for is this

let's say you have this

<h3 class="TEST jump" id="TEST">TEST</h3>

so what you need to do is

.TEST {
scroll-margin-top: 5px;
}

This way after clicking

<a href="#TEST">

you will jump a 5px above h3

about accesibility: caniuse

score 1 · Answer 2 · answered Jul 03 '20 at 20:31

1

If you set a custom class for this h3

<h3 class="TEST jump" id="TEST">TEST</h3>

then you could add CSS like so:

.jump {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

answered Jul 03 '20 at 20:31

Ron