Question

I’m testing out tab plugins and one thing I’d like to do is when the user clicks a link (from external sites or inside the page) with a tab’s hash, the browser would not jump to the position of the tab, but instead switch to it.

This is how jQuery Tools’ tab component does it. If you click the links below, the window would not scroll and the relevant tab is displayed:

http://flowplayer.org/tools/demos/tabs/anchors.html#first

http://flowplayer.org/tools/demos/tabs/anchors.html#second

http://flowplayer.org/tools/demos/tabs/anchors.html#third

Compare it with jQuery UI Tabs demo below. The window would scroll upon opening the page:

http://jqueryui.com/demos/tabs/#tabs-1

http://jqueryui.com/demos/tabs/#tabs-2

http://jqueryui.com/demos/tabs/#tabs-3

One of the answers to similar questions on SO suggested this inside the document.ready handler:

setTimeout(function() {
  if (location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);

This works but the scrolling is very noticable compared to flowplayer.org’s. I’m wondering how does flowplayer.org’s script achieve this perfect effect? After looking through their demo code I could not find anything. Any help is appreciated, thanks!

Answer 1

Where as jquery’s demo is using elements with a set id attribute, the flowplayer demo appears to be getting away without out any hence I believe no ‘jumping’. However I can’t for the life of me work out quite how/why the anchor is being recognised. I doubt it has anything to do with jquery itself as the only line really is $("ul.tabs").tabs("div.panes > div"); but I may be wrong and someone else can shed some light.

Edit: Was incorrect jquery does internally use windows.location.hash and does indeed ‘use’ that against against the href attribute.