HTML not scrolling to target correctly - html

Question

I've created an anchor tag as follows
Top
And created following tags
<h2 id="top">Header</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
Once clicking on a link, it's scrolling to that target but not can't see the <h2> tag. So atleast needed to scroll above the target by 10px or 20px. Please help me overcome this and the work would be more appreciable.

Answer 1

Do like that: add tabindex in
<h2 id="top" tabindex="1" >Header</h2>
and use focus()
$("#top").attr("tabindex",-1).focus();
OR
or the simplest way is that add a anchor tag near h2 and add id="top"
<a id="top"></a><h2>Header</h2>
but I won't prefer this.

Answer 2

First thing you need to change href of anchor tag as below
Top
then you can write below jQuery code to get scroll to the target
(function() {
$('a').click(function() {
$('html, body').animate({
scrollTop: $("#top").offset().top
}, 3000);
});
});
It will work.

Answer 3

Personally I usually minus some pixels from the top of the div so my headings appear normal, do this:
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top - 25
/* You can minus the pixels */
}, 500);