0

Ajax がコンテナー内のコンテンツをリロードした後、変数 #id にフォーカス位置を設定したいと考えています。コンテナ自体がoverflow:auto;入っているので、コンテンツが大きすぎるとスクロールバーが表示されます。しかし、新しいコンテンツを挿入した後、設定する #id にフォーカスを設定できません。

最初にIDにフォーカスを設定しようとしました:

<script type="text/javascript">
function SetFocus(ulID) {
  var HeightUL = $("#"+ulID).offset();
  $("#"+ulID).focus();
}
</script>

後で、この ID の合計の高さを取得しようとしたのでoffset()、$("#"+ulID).offset().top;orを付けて を付けることができました$("#"+ulID).position().top;。

function SetFocus(ulID) {
  var HeightUL = $("#"+ulID).offset().top;
  $("#"+ulID).stop().animate({ scrollTop: HeightUL }, 'fast');
}

しかし、これもうまくいきません。position()I get 0 で返されoffset()、オブジェクトの親に対する相対高のみが返されます。オブジェクトがコンテナ内に配置されている高さの合計ではありません。

HTML:

<div class="info-container edit" id="info-container-edit">
  <span class="cat">Info 1</span>
  <ul id="Info1" class="cat-list music">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  <span class="cat cat">Info 2</span>
  <ul id="Info2" class="cat-list music">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  <span class="cat cat">Info 3</span>
  <ul id="Info3" class="cat-list music">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  <span class="cat cat">Info 4</span>
  <ul id="Info4" class="cat-list music">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Ajax コードはコンテナーを更新し#info-container-editます。#Info3私の問題は、たとえば、に集中したいことですSetFocus('Info3');。#Info2コンテナ#info-container-editから までの全高ではなく、の高さを返すようです#Info3。

誰でもこの問題を解決する方法を指摘できますか? コンテナー内の #id の位置の高さを取得できれば、問題を解決する必要があります。または、表示フォーカスを #id に設定する方法は?

4

2 に答える 2

0

これで試してください

$(document).ready(function(){
    $(window).scrollTop($('#Info2').offset().top);
});

jsfiddleで動作するのを見てください

于 2013-04-25T15:59:07.890 に答える
0

使用できます.scrollIntoView()：

document.getElementById(ulID).scrollIntoView(false);
于 2013-04-25T16:02:02.433 に答える