Preventing scroll when using URI hash to identify tab

Question

I\'m using JQuery UI to make tabs in my application. I needed the tabs to be linkable (direct link that opens the page and selects the correct tab). This is done by using a

Answer 1

You have to change the window hash without scrolling the page. Here is already a question on SO - Modifying document.location.hash without page scrolling.

The changes required are:

$("#tabs").bind('tabsshow',function(event, ui) {
    setHashWithoutScroll(ui.tab.hash);
});

The setHashWithoutScroll function can be taken from the above mentioned link.

function setHashWithoutScroll(hash) {
    hash = hash.replace( /^#/, '' );
    var fx, node = $( '#' + hash );
    if ( node.length ) {
      node.attr( 'id', '' );
      fx = $( '
' )
              .css({
                  position:'absolute',
                  visibility:'hidden',
                  top: $(document).scrollTop() + 'px'
              })
              .attr( 'id', hash )
              .appendTo( document.body );
    }
    document.location.hash = hash;
    if ( node.length ) {
      fx.remove();
      node.attr( 'id', hash );
    }
}

The accepted answer throws an error to me - jQuery UI Tabs: Mismatching fragment identifier. So I had to use this one.