Anchor link landing in wrong position

问题

Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.

http://harrisonfjord.com/thinkinc/

A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.

None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?

Cheers!

回答1:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I'd try sticking the fragment identifier in the actual renderable entity such as:

<h2 id="sponsors">Sponsors</h2>

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

回答2:

I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):

$(document).ready(function() {
    if(window.location.hash.length > 0) {
        window.scrollTo(0, $(window.location.hash).offset().top);
    }
});

It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307

回答3:

I got problem in iphone for links with fragments, having <a href="#info">TYPES OF INFORMATION WE COLLECT</a>, correctly linking to <h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.

That wasn't working properly, and I fixed with a solution like this (using jQuery):

window.scrollTo(0,$('#info').offset().top);

回答4:

I don't know what standard your page is trying to conform to, but it is full of errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Some of them so severe, for example:

Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.

that the validator gives up. Contrasted with a page like gnu.org

http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0

You should be pleased that the site renders at all.

回答5:

I solved this with a trick, I have put an empty span element with the required ID and a line break before the div

<span id="sponsors">&nbsp;</span>
<br>
<div class="sponsors">
    <div class="sponsors-left">
        <h2>Sponsors</h2>
            <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
    </div>
</div>

<a href="#sponsors">GO TO SPONSORS</a>

来源：https://stackoverflow.com/questions/6826741/anchor-link-landing-in-wrong-position

标签

html

hyperlink

position

anchor