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?