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()我得到 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 回答