Jquery-ui-tabs - After switching to new tab and scrolling to element, div immediately scrolls back to top.

Jquery-ui-tabs - After switching to new tab and scrolling to element, div immediately scrolls back to top.

Hello all,

First of all thank you for taking the time to read my question. Here's a description of what I'm trying to accomplish, and the issue I'm presently facing -

I have some HTML which looks as follows - 

  1. <div id="wrapper">
        
    <div id="opportunities">
            
    <input type="text" id="txtSearch" />
            
    <ul>
                
    <li><a class="tab" href="#IHIPOpportunities">In Hand In Proccess Opportunities</a></li>
                
    <li><a class="tab" href="#PendingOpportunities">Pending Opportunities</a></li>
                
    <li><a class="tab" href="#NewOpportunities">New Opportunities</a></li>
                
    <img id='btnRefresh' src='css/custom-theme/images/refresh.png' alt='refresh' />
                
    <img id='btnSave' src='css/custom-theme/images/save.png' alt='refresh' />
                
    <img id='btnCollapseAll' src='css/custom-theme/images/collapse24.png' alt='refresh' />
            
    </ul>
            
    <div id="IHIPOpportunities">
                
    <ol class="productList">
                
    </ol>
            
    </div>
            
    <div id="PendingOpportunities">
                
    <ol class="productList">
                
    </ol>
            
    </div>
            
    <div id="NewOpportunities">
                
    <ol class="productList">
                
    </ol>
            
    </div>
        
    </div>
    </div>

When my page runs I am calling - $('#opportunities').tabs();

Now I also have a text box at the top of the page with an auto suggest feature. When the user clicks on one of the suggestions I want the page to navigate them to the appropriate tab, and then scroll to the element representing the selection they made.

I am trying to make that happen in the following code - 

  1. $('#txtSearch').autoSuggest(opportunityData.items, { selectedItemProp: "name",
                    searchObjProps
    : "name",
                    selectedValuesProp
    : "value",
                    selectionClick
    : function (elem) {
                        
    var opportunityID = $(elem).attr('name');
                        
    var opportunity = $('#' + opportunityID);
                        
    switch ($(opportunity).attr('name')) {
                            
    case "IHIP":
                                $
    ('#opportunities').tabs('select', '#IHIPOpportunities');
                                
    break;
                            
    case "pending":
                                $
    ('#opportunities').tabs('select', '#PendingOpportunities');
                                
    break;
                            
    case "new":
                                $
    ('#opportunities').tabs('select', '#NewOpportunities');
                                
    break;
                        
    }
                        
    if (!$(opportunity).children('.revTablesContainer').is(':visible'))
                            $
    ('#' + opportunityID + ' .revTablesContainer').slideDown('fast');
                        $
    ('#wrapper').scrollTop($(opportunity).position().top);
                        
    return false;
                    
    }
                
    });
Obviously the scroll is supposed to happen at -
  1. $('#wrapper').scrollTop($(opportunity).position().top);
                            
    return false;

Now the page is definitely scrolling to the element, but as soon as it's finished scrolling the scrollbar pops back up to the top of the wrapper div.

I have no idea what is causing this issue, but I'm guessing it's something with jquery ui tabs and scrollTop not playing nicely.

Anyone have any ideas?

Thanks,

Zachary Carter