当我返回div的页面时,我想滚动到div中的位置。 因此,当我单击列表中的项目时,该项目的ID为例如223。 返回页面时,scrollTop必须转到之前点击的相同位置。
我将项目的ID保存在cookie中。
这是我的代码:
$(function () {
var id = $.cookie('LastPositionCookie');
var rowPos = $("#" + id).position();
if (rowPos != null) {
$('#tableBodyRes').scrollTop(rowPos.top);
}
else {
alert(id + " " + rowPos + " error.");
}
});
滚动工作正常,但它从页面顶部滚动,而不是从div(tableBodyRes)滚动。我该如何解决这个问题?
编辑:添加了包含信息的图片
在这里你可以看到我的div有一个溢出。在右边,我的浏览器正常溢出。当我再次回到这个页面时,我需要去绿色项目。
由于
答案 0 :(得分:2)
将页面滚动到元素的顶部,
// Swap ...
$('#tableBodyRes').scrollTop(rowPos.top);
// With ...
$('body').scrollTop(rowPos.top);
修改强>
为了将来参考,当前的问题是将内部元素滚动到相对于父元素的位置(父元素具有overflow:hidden;
),而不是相对于文档本身。
我们提出的解决方案是获取内部元素的顶部位置并从父元素的顶部位置中减去。
相关的jQuery
var rowPos = $("#336").position();
var divPos = $("#tableBodyRes").position();
var newTop = rowPos.top - divPos.top;
$('#tableBodyRes').scrollTop(newTop);
HTML
<div id="tableBodyRes" class="tableBodyDiv clearfix">
<table id="tableReservations">
<tr id="335"><td>335</td></tr>
<tr id="336"><td>336</td></tr>
<tr id="337"><td>337</td></tr>
</table>
</div>