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


Staff member
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

<%@ 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>
    <div id="tabDisplay">
        <% Html.RenderPartial("SearchJobsMiniControl"); %>

<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) {

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

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?