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

This may not be the best method, but if you rename all of the ID's after the tabs have been created, then adding a hash with the original ID won't scroll the page. I used this method because even with javascript disabled, the hash will take the user to the correct ID. Here is a demo of the code below:

$("#tabs").tabs({
    create: function(event, ui) {
        // get tab plugin data
        var tabs = $('#tabs').data('tabs'),
            // tabs.anchors contains all of the tab anchors
            links = tabs.anchors;
        // tabs.panels contains each tab
        tabs.panels.each(function(i){
            // just adding a "mod_" prefix to every ID/hash
            this.id = 'mod_' + this.id;
            links[i].hash = '#' + this.id;
        });
    }
});

/**
 * Add hash to URL of the current page
 * 
 * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html
 * http://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui-tabs
 */
$("#tabs").bind('tabsshow', function(event, ui) {
    // remove the prefix from the ID, so we're showing the original ID in the hash
    window.location.hash = ui.tab.hash.replace('mod_', '');
});

Answer 2

This simple method worked for me:

/* Prevent scroll to tab on click */
$(document).ready(function(){
  $("a.ui-tabs-anchor").click(function(e){
      e.preventDefault();
      return false;
  });
});

Answer 3

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 = $( '<div></div>' )
              .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.

Answer 4

I tried @mottie solution but is not working now (2 years after).
It triggers an error: TypeError: tabs is undefined.

Following is an acceptable solution for me:

// preventing scroll
// $("#tabs li a[href^='#tab']").bind('click',function(e){ // less general but better
$("#tabs li a").bind('click',function(e){
    $("html, body").animate({ scrollTop: 0 });
});

Answer 5

I'm using jQuery 1.11.1. This workes nicely for me.

$("#tabs").tabs(); //initialize tabs
$(function() {
    $("#tabs").tabs({
        activate: function(event, ui) {
            var scrollTop = $(window).scrollTop(); // save current scroll position
            window.location.hash = ui.newPanel.attr('id'); // add hash to url
            $(window).scrollTop(scrollTop); // keep scroll at current position
        }
    });
});

jQuery UI tabs, update url when clicking on a different tab

Thanks to Jeff B for pointing me here http://jsfiddle.net/jtbowden/ZsUBz/44/

Answer 6

There are many answers on this page, and in my mind, most are overcomplicating a simple issue.

Basically, the solution from david-thomas is the simplest and most effective. Essentially, all you want to be doing is preventing the default link behaviour on a tab link (<a> tag).

The same answer applies to the bootstrap tabs, where you have to specify the click handler

   $('.nav-tabs a').click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });