How to prevent a jquery Ajax call from scrolling a form with an input to the top of browser window

Question

First, I'm not totally sure what is causing this behavior. JQuery, Ajax, default browser behavior (happens in IE, FF & Chrome).

But, I have a tab control with 5 tabs on a web page. Each tab is loaded via a jquery ajax call. Four of the tabs load without any issue. The fifth tab, the only one that contains a textbox input control scrolls the page so that the tab contents are at the top of the browser window.

I would like to stop this behavior if possible, or if I can't identify the cause, how would I use jquery to scroll the browser window back to the top?

Code (based on an example from EricDotNet at http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="tabs">
    <ul id="tabMenu">
        <li id="tabLi-1" class="tabLi" style="background-color:#fff"><a id="tabA-1" href="#tabs-1" style="color:#004980" onclick="getContentTab(1);">Jobs</a></li>
        <li id="tabLi-2" class="tabLi"><a id="tabA-2" href="#tabs-2" onclick="getContentTab(2);">Tab 2</a></li>
        <li id="tabLi-3" class="tabLi"><a id="tabA-3" href="#tabs-3" onclick="getContentTab(3);">Tab 3</a></li>
        <li id="tabLi-4" class="tabLi"><a id="tabA-4" href="#tabs-4" onclick="getContentTab(4);">Tab 4</a></li>
        <li id="tabLi-5" class="tabLi"><a id="tabA-5" href="#tabs-5" onclick="getContentTab(5);">Tab 5</a></li>
    </ul>
    <div id="tabDisplay">
        <% Html.RenderPartial("SearchJobsMiniControl"); %>
    </div>
</div>

<script type="text/javascript">

        function getContentTab(index) {
            var url='<%= Url.Content("~/ajaxaction/getajaxtab") %>/' + index;
            var targetDiv = "#tabDisplay";
            var selectedLi = "#tabLi-" + index;
            var selectedA = "#tabA-" + index;
            var ajaxLoading = "<img id='ajax-loader' src='<%= Url.Content("~/Content/images/") %>/ajax-loader.gif' align='left' height='28' width='28' />";

            $(targetDiv).html("<div style='margin:20px;vertical-align:middle;width:80%'>" + ajaxLoading + "<br /Loading...</div>"); 

            $.get(url,null, function(result) {
                $(targetDiv).html(result);
            });

            $(".tabLi").css("background-color", "#004980");
            $(".tabLi > a").css("color", "#fff");
            $(selectedLi).css("background-color", "#fff");
            $(selectedA).css("color", "#004980");
        }
</script>

The above view + javascript calls into the following action:

public ActionResult GetAjaxTab(int id) {

            switch (id) {
                case 1:
                    return PartialView("Tab1");
                case 2:
                    return PartialView("Tab2");
                case 3:
                    return PartialView("Tab3");
                case 4:
                    return PartialView("Tab4");
                case 5:
                    return PartialView("Tab5");
            }
            return null;
        }

It is actually the first tab that scrolls the page. Further, it does not appear that my initial thought — that it was the input box causing the scroll — is correct. The behavior persists if I remove the input box from the partial view that is loaded (and if I remove all markup from the partial view), if I switch the tab order the same.

So maybe something in the HTML or CSS though I still can't find it. There is no default focus being set in CSS. Nothing obvious that would cause scrolling to occur.

So, if there is no obvious cause, is there a way to scroll using jquery / javascript?

Answer 1

Code sample?

You may have the tab's link pointing to the id of the text area (or something else) that causes the browser to jump to that position on the page.

Move the textarea to a different tab and see what happens.

Without a code sample it's impossible to tell.

Answer 2

Probably due to the textbox being focused. I'd consider it a feature; otherwise, force focus somewhere else.

Answer 3

You need to replace href="#tabs-1" for each li with href="javascript:void(0);" or write a function that would do that for you or href="" and add 'return false;' at the end of your onclick function . #tabs-1 creates an html anchor that pushes the page to the top.