Fixed Page Header Overlaps In-Page Anchors

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

Anchor links to start below the header which is fixed at the top

Ive got an even better solution to this problem.

• Firstly in the css a class can be created (call it whatever you want)

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

• In the HTML just before your actual div section starts, for example mine is #landingcontainer you should add a span tag with the class of anchor (which we made above) and an id of whatever you want. for me I did this :

<span class="anchor" id="landing"></span>

Then the actual link will not now be linked to your actual div id of the section you want to take them to, but rather the id of the span tag must be given in the link.

<a href="#landing">HOME</a>

AND THERE YOU HAVE IT!

what we are doing here in essence is making the browser stop where the span starts which is exactly the height of the header, which then makes the viewer non the wiser ;)

Scroll to anchor position with fixed header

UPDATED ANSWER

This is the working code jsFiddle

---

PROBLEM SUMMARY

1. When a user clicks one of the menus, screen will move to the content section, but it's too close to the header. There should be spaces between the content area and my header.
2. I need to move screen to the expected content section when a user enters into my homepage with a query string like '#aboutus'

This is your core question I could understand so far, and I summarized this for the future helpers for you.

I thoroughly checked your codes and found some factors that don't bring you the result you expected.

First, there was no document.ready() scope. Everything was declared over global scopes. Well your functions seem to be okay in the global sections, but your click events should be declared in the document.ready() section so that jQuery properly takes them and initilizes them.

For this reason, your original code doesn't produce the animation when scrolling down to the expected section because it's the browser's default behaviour by href=#, not by your click event. So I added some of codes to ensure the event call.

And secondly, you didn't have any methods to scroll to the expected content section when your url has a query string like #gallery, #aboutus, and etc. So I put some codes for that

Please find my ID on the script sheet, then it will locate the exact points where I newly added or editted the existing codes. I commented a lot

---

FYI

There's a thing that I couldn't figure out. Your code is supposed to work nicely, but IE scrolls differently. Since you use event.preventDefault() on your click event, the default scrolling action by href=#something shouldn't work. But it does the behaviour in IE whereas chrome shows the expected result. ( what I'm telling you here is that the task to leave spaces for your sticky header )

I thought at first that this is the IE bug, but it wasn't. It should work like this example I made. well, I can't dig into this problem any further. It's your time.

---

OLD ANSWER

In this case, you need to get the query string and let your scrollToAnchor takes it at the $(document).ready() point.

var queryString = window.location.hash;    
scrollToAnchor(queryString);

I tested on your fiddle and it works.

And please make sure your scrollToAnchor doesn't throw an error because of an empty parameter. The emptry string "" and null object causes an error in your scrollToAnchor

Put a safeguard like this.

function scrollToAnchor(anchorId) {
    if ( anchorId == null || anchorId == "" ) {
        return false;
    }
    .
    .

But this safeguard also cannot prevent the error when a user mistyped querystring, like #avoutus which doesn't exist on your document. So I recommend you avoid $(anchorId).offset().top - offset; this kind of code.

Selecting an element directly via such dynamic variables can't gurantee a safe object unless they are totally under your control.

---

Related Topics