偏移同一页面中的链接

Question

I have a menu bar at the top that has links as below:

<a href="#1">Football</a>
<a href="#2">Cricket</a>
<a href="#3">Rugby</a>
<a href="#4">Tennis</a>

I have a fixed menu bar that is 50px in height. When the links are clicked, the headings are hidden behind the fixed menu bar. Is it possible to have the headings be displayed 50px lower (so they can show) when its corresponding link is clicked.

html:

<h2 class="menuheading" id="1">Football</h2>
...
<h2 class="menuheading" id="2">Cricket</h2>
...
<h2 class="menuheading" id="3">Rugby</h2>
...
<h2 class="menuheading" id="4">Tennis</h2>

Answer 1

you may apply always a padding-top/margin-top to your headings or (in modern browser) only when they are targetted — as you asked, eg

h2:target {
  padding-top: 50px;
}

Further information about :target pseudoclass on MDN

Answer 2

Add this to your CSS style for menuheading

.menuheading {
  margin-top:50px;
}

Answer 3

A possible duplicate of this... How can I make a menubar fixed on the top while scrolling

What happens is the body tag is loaded at the top of the page by default, so all you need to do is put

body {margin-top:50px;} /* Same height as the menu bar */

it goes into more detail on the attached question link.