Problem with hyperlink and fragment

Question

At the top of my page is a statically located menu bar that follows the screen while scrolling.

When using fragment linking, the scroll position should be shifted along the height of the menu bar. How can this be achieved?

<a href="#fragment">Go to fragment</a> <div id="fragment">...</div> html { padding-top: 38px; } /* Offset page to allow for menu strip */ .menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; } 

Is there a simple CSS change that can be made to achieve this?

Otherwise, is there a general way to shift the scroll by 200 pixels when defining a fragment?

Answer 1

What you want to do is process your own hash links. A good idea is to group all of your a that link the hash link. for instance

 $(".ahashlink").click( function() { var location = $(this).attr("href"); var offset = $(location).offset().top; $("body").scrollTop(offset+38); return false; }); 

This will allow you to scroll another 38 pixels (the height of the top panel) to the desired PLUS position. This, however, will not change your URL in your browser to contain the correct hash. This is because after you have window.location.hash = "#something" , your window will automatically scroll through this hash. Therefore, keep this in mind.

Answer 2

This old article has only HTML + CSS .

The basic idea is to use : before the css selector to insert some hidden content in front of each connecting element to offset them:

 <linked_elements>:before { display: block; content:" "; margin-top: -<offset>; height: <offset>; visibility: hidden; } 

Here's the jsfiddle of their demo .

This will also (I think) remove the need for html { padding-top: 38px; } html { padding-top: 38px; }