0

我有一个项目表。每个项目都有细节。该表在项目名称和项目详细信息之间交替。我给每个项目行一个“项目名称”类,每个项目详细信息行一个“项目详细信息”类。当页面加载时,我隐藏了所有项目详细信息行,以便只有项目名称行可见。

当用户单击项目名称行时,它会在该行下方显示(展开)项目详细信息。如果用户单击不同的项目名称,它会关闭打开的项目详细信息并打开与单击的新项目相对应的项目详细信息。

我希望页面滚动到单击的项目名称,这与使用锚标签移动到页面的不同部分的方式非常相似。现在,如果用户单击项目名称中包含大量文本的项目详细信息,则用户可能必须向下滚动才能阅读全部内容。如果用户然后单击下一个项目名称,它将关闭上面的项目详细信息并打开新的项目详细信息。但是因为第一个 item-detail 太长了,所以新的 item-name 和 item-detail 实际上在窗口的滚动视图上方。它们在上一个项目的正下方展开,但用户之前已滚动到此点下方。

我考虑命名所有项目名称行并使用 jquery 使用各种锚标记来调用名称,但这似乎不是最理想的。

是否有 jquery 可以重新调整窗口焦点,使单击的项目名称位于页面顶部?

4

2 回答 2

0

这应该有效:

$('.dropdown').click(function() {
    //drop down code
    var destination = $(this).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
    return false;
});
于 2012-08-14T18:32:22.773 回答
0

你可以说类似

function scrollTo(theElement){
document.getElementById("myTable").scrollTop=theElement.offsetTop;
}

并在单击元素时调用它,或者您可以使用 jQuery 的 scrollTo 方法

于 2012-08-14T18:34:33.970 回答