jquery Ajaxコールがフォームをスクロールしてブラウザウィンドウの上部に移動するのを防ぐ方法

Question

まず、この現象の原因を完全にはわかりません。 JQuery、Ajax、デフォルトブラウザの動作（IEで発生、FF & Chrome）。

しかし、Webページに5つのタブを持つタブコントロールがあります。各タブは、jquery ajax呼び出しによってロードされます。 4つのタブは問題なくロードされます。 5番目のタブは、テキストボックス入力コントロールを含む唯一のもので、タブの内容がブラウザウィンドウの一番上になるようにページをスクロールします。

可能であればこの動作を停止したいのですが、原因を特定できない場合は、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を使用してスクロールする方法がありますか？

Answer 1

コードサンプル？

ブラウザのページ上のその位置にジャンプするテキスト領域のID（または他のもの）を指しているタブのリンクがある可能性があります。

テキストエリアを別のタブに移動し、何が起こるかを確認します。

コードサンプルがなければ、それはわかりません。

Answer 2

おそらく、テキストボックスがフォーカスされているためです。私はそれを特徴と考えています。それ以外の場合は、他の場所にフォーカスを強制します。

Answer 3

各liのhref = "＃tabs-1"をhref = "javascript：void（0）;"に置き換える必要があります。 またはあなたのためにそれを行う関数を書いてください。 またはhref = ""を追加し、 'return false;'を追加してください。あなたのonclick関数の最後に 。 ＃tabs-1はページを一番上にプッシュするhtmlアンカーを作成します。