Question

I’m making use of the jQuery Tabs plugin along with the “History” plugin, to allow bookmarking and use of the browser back button. Everything works great – except in IE 6 and 7. When you load the page, IE jumps down to the anchors.

Here’s the example implementation: http://coolkidz.com/sell-consign/

Any ideas to get IE to behave nicely?

Answer 1

When the History tool is enabled in IE 6/7, it adds a hidden iframe to the page and initially sets the iframe’s location.hash to '#'. When this happens, IE scrolls to the iframe (even though is it hidden), which is at the bottom of the page.

Without being able to edit the jQuery Tools source, I can think of two workarounds:

1. Add this JavaScript before you initialize jQuery Tools Tabs (demo):

   if ($.browser.msie && $.browser.version < '8') {
       $(window).one("hash", function(e, h) {
           if (h === '#') {
               $(window).scrollTop(0);
           }
       });
   }
   

   This scrolls to the top of the page after the History tool is initialized. The down side to this workaround is that if the window wasn’t at the top of the page, IE would have stayed at the correct position, but this forces it to scroll to the top.

2. Add this CSS (demo):

   iframe {
       position: absolute;
   }​
   

   IE doesn’t try to scroll to a position: absolute iframe. The down side to this workaround is that this affects any other iframes on your page.

I suggest going with workaround #1.