Question

So on my page I have a menu that is fixed to the top of the page. The menu is roughly 50px high and spans the entire width of the screen. In order to display the content of the page properly on load I set an arbitrary amount of padding to the top of the body content. Now, if I want to link to an element on the page using:

<a href="#idOfElement">anchor text</a>

Normally when these links are clicked, the element in question is displayed at the top of the browser window. However, since I have my fixed menu there, the content (or at least the first ~50px of it) is hidden by the menu.

Is there a way to offset the inner-page link so it doesn’t bring the requested element to the very top of the page?

Answer 1

Using Javascript (jQuery), assuming your content div and your hyperlink have an id, and, assuming I understand your question:

$("#yourAId").click(function(){

  $("#yourContentId").css("padding-top", $("#yourContentId").css("padding-top") + 50 );

});