Adding auto shift to scroll position for all hash links / calls

Question

I have the following problem:

Like Facebook, I have a menu bar at the top of the page that is always visible ( position: fixed; ). When I now click hash links on my page (or load a new page with a hash in the URL) to go to a specific element on the page, the browser always scrolls that element to the very top of the page, which means that the element is located behind the top panel menu.

I would like to add Javascript (jQuery or plain Javascript) that automatically adds a (negative) offset to this scroll position, so that the related item is located directly below the top menu bar when you click a link or the page is loaded. But I do not want to add event listeners to all the links that take care of this. I also want the solution to work if the page is loaded with a hash in the URL using the address bar of the browser (or when linking to another page with a hash at the end of the URL).

You can find the clickdummy of my page at http://loud.fm/tmp/details.html . Click on the comment bubble in the upper right corner of the image on the left to go to the comments. If your browser window is small enough, you should go to the gray “COMMENTS” headers and pagination before comments are indicated. I would like the title and pagination to appear right below the top menu after clicking the jump link.

Can you help me please? Thank you in advance!:)

Regards, Renee

Answer 1

I really found a solution that worked for me using only css:

I added margin-top: -40px; and padding-top: 40px; to the element pointed to by the transition link. This works for all major browsers: IE (7-9), Firefox, Opera, Chrome and Safari.

Only problem: if this element is after the floating-point element, the negative field does not work (this means that the positive addition becomes visible). Please comment if anyone knows a solution / workaround for this. Then I will update my message. Thank!

Answer 2

To add a solution to this solution, I found that setting the display to a question does not solve the problem of filling in words when used among floating elements.

So:

 .symbol-target { padding-top: 40px; margin-top: -40px; width: 1px; /* '0' will not work for Opera */ display: hidden; } 

I also included this style as an empty div right above the target content.

Answer 3

As an example, consider the D bootDoc solution, which works in all major browsers:

CSS (add header height instead of 40px ):

 .symbol-target { padding-top: 40px; margin-top: -40px; width: 1px; /* '0' will not work for Opera */ display: inline-block; } 

HTML:

 <h3> <span class="symbol-target" id="myTarget">&nbsp;</span> <a href="#myTarget">My text</a> </h3> 

Example of a real page:

std.array.uninitializedArray using bootDoc

Note:

This does not work for IE 6.

Answer 4

Best for me was:

• Specify the assigned identifier (what you want in the URL) for another element within the required element.
• Make this new element absolute and move it X pixels above the required element, where X is the height of the fixed caption.

Answer 5

I found that this way of adding :before in css seems to work well.

 h2:before { display: block; content: " "; margin-top: -285px; height: 285px; visibility: hidden; } 

Read more on the CSS Tricks website

Answer 6

Try positioning the top of the page to fit the area behind the menu bar. Something like: padding-top:80px; (instead of 80px you should set the height of your menu).

Answer 7

Unfortunately (at least using Firefox), neither add-ons nor fields are added here (putting them in the "main" div containing everything except the menu bar); scrolling to the anchor always puts it at the very top of the page, fixed elements will be cursed.

I think you will have to go with your original idea, but remember that with the help of delegation you can install only one handler that will work with all the links in your menu bar, including dynamically added ones.

Answer 8

With pure javascript, you can do the following. It will listen for the click event for all anchor tags and scroll to the desired position on the page (using jquery):

 /* go to specific position if you load the page directly from address bar */ var navbarHeight = document.getElementById('mynavbar').clientHeight; function gotoSpecificPosition() { if (window.location.hash.length !== 0) { window.scrollTo(window.scrollX, window.scrollY - navbarHeight ); } } /* Captures click events on all anchor tag with a hash tag */ $(document).on('click', 'a[href^="#"]', function(event) { // Click events are captured before hashchanges. Timeout // causes offsetAnchor to be called after the page jump. window.setTimeout(function() { offsetAnchor(); }, 0); }); window.setTimeout(offsetAnchor, 0); 

The code above will handle all the tricks.