1

当返回到 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 溢出。右边是我的浏览器的正常溢出。当我再次返回此页面时,我需要转到绿色项目。

谢谢

4

1 回答 1

2

要将页面滚动到元素的顶部,

// Swap ...
$('#tableBodyRes').scrollTop(rowPos.top);

// With ...
$('body').scrollTop(rowPos.top);

编辑

为了将来参考,手头的问题是将内部元素滚动到相对于父元素(parent has 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>

和一个很好的衡量标准的 jsFiddle。

于 2012-09-20T06:52:05.820 回答