Anchor link landing in wrong position
Solution 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.
Solution 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
Solution 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);
JVG
Updated on July 09, 2022Comments
-
JVG almost 2 years
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!
-
JVG almost 13 yearsGood point, I didn't think validation affected this kind of thing so was gonna do it after. I'll get on it now and report back if it's still broken, cheers!
-
JVG almost 13 yearsOk, back and now fixed, validated as HTML 4.0 Transitional. However, anchor still not working! Any thoughts?
-
JVG almost 13 yearsAha! Got it, worked a charm, thanks mate. Incidentally - I'm one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers :)
-
reallynice about 9 yearsNice workaround: I used it because firefox wasn't landing in the right place the first time, i.e. after following a link with a fragment, but requesting that exact URL on firefox's bar made the browser land in the right place.
-
Gilles Mordant over 7 yearsThis worked for me on a page where I was using a table-of-contents js snippet. On only one page of many following the same pattern, the initial scroll was not taking into account the added text from the TOC.
-
Alexandr Kazakov over 5 yearsThanks @vard. I really had this solution did not work until the end and I set the timer with a minimum delay. Now works in Mozilla perfectly.
if (window.location.hash.length > 0) { setTimeout(function() { window.scrollTo(0, $(window.location.hash).offset().top); }, 100); }
See you.