Во-первых, я не совсем уверен, что вызывает такое поведение. JQuery, Ajax, поведение браузера по умолчанию (происходит в IE, FF и Chrome).
Но у меня есть вкладка с 5 вкладками на веб-странице. Каждая вкладка загружается с помощью вызова jquery ajax. Четыре вкладки загружаются без проблем. Пятая вкладка, единственная, которая содержит элемент управления вводом текстового поля, прокручивает страницу так, чтобы содержимое вкладки находилось в верхней части окна браузера.
Я бы хотел остановить это поведение, если это возможно, или, если я не могу определить причину, как бы я использовал jquery для прокрутки окна браузера обратно к вершине?
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>
Приведенный выше вид + javascript вызывает следующее действие:
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;
}
Это фактически первая вкладка, которая прокручивает страницу. Кроме того, не похоже, что моя первоначальная мысль - что это было поле ввода, вызывающее прокрутку - верна. Поведение сохраняется, если я удаляю поле ввода из загруженного частичного представления (и если я удаляю всю разметку из частичного представления), если я переключаю порядок табуляции тем же.
Так что, может быть, что-то в HTML или CSS, хотя я до сих пор не могу найти это. В CSS не устанавливается фокус по умолчанию. Ничего очевидного, что могло бы вызвать прокрутку.
Итак, если нет очевидной причины, есть ли способ прокрутки с помощью jquery / javascript?