开发者

Anchor tag issue in FF; targeting hidden div

I'm having an issue with Firefox and anchor links from an external page to a tab div on the landing page; while IE render these correctly (I know, that means little), FF and Chrome both send the user to a place somewhat above or below the actual anchor tag. I didn't write the original code, but I'm开发者_如何学C not able to find much about a FF bug that would cause this, or a solution?

Starting link: http://www.washington.edu/students/gencat/academic/sis.html#INTSTUDUG


Some JavaScript is changing the layout of the page after it has been loaded. If you disable JavaScript on your browser, you will see that both FF and Chrome work fine.


It's got to do with your javascript. The anchor takes you to a specific place on the page, then javascript changes the tab which makes the div at the top of the page bigger. This happens after the page has been scrolled, which puts you off the anchor.

Try turning loading the page with JS on, and JS off, you'll see what I mean.

How to fix this? You could use jQuery to scroll to the anchor on the document ready function, like so:

$(function() { 
    var anchor = $('a[name="' + window.location.hash.replace('#', '') + '"]');
    if(anchor) {
         $('html, body').animate({scrollTop: anchor.offset().top});
    }
});

Slightly hacky fix, but it'll work. A better one would be to ensure that JS doesn't change the layout on document ready :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜