Question

I am working on a WordPress blog where there is going to be an option to have a Table of Contents (TOC) auto created from an articles Heading tags <H2> <H3> <H4>

Table of Contents links auto created from Heading tags in the page content…

<a href="#item1">TOC Item 1</a>

<a href="#item2">TOC Item 2</a>

<a href="#item3">TOC Item 3</a>

The target to these links in the page…

<h2 id="item1">TOC Item 1</h2>

<h2 id="item2">TOC Item 2</h2>

<h2 id="item3">TOC Item 3</h2>

My problem is the theme I am working on has a Fixed header that is around 50 pixels. So when you click a link in the Table of Contents to go to it’s target id, the item is hidden because of the 50 pixel header.

I am hoping to figure out a solution so that I can make the link go to a position on the page that will always be 50 pixels or so higher in the page then the actual target ID is located.

Any ideas on a solution?

Answer 1

Something like this would work:

<h2><span style="position: absolute; margin-top: -50px;" id="item1"></span>TOC Item 1</h2>