Question

我有一张物品表。每个项目都有细节。该表在项目名称和项目详细信息之间切换。我给每个项目行一个“item-name”类，每个项目详细信息行为“item-detail”类。当页面加载时，我隐藏了所有项目详细信息行，以便只显示项目名称行。

当用户点击项目名称行时，它会显示（展开）该行下方的项目详细信息。如果用户单击其他项目名称，它将关闭打开的项目详细信息并打开与单击的新项目对应的项目详细信息。

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

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

是否有jquery会重新聚焦窗口，使点击的项目名称位于页面顶部？

Answer 1

这应该有效：

$('.dropdown').click(function() {
    //drop down code
    var destination = $(this).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
    return false;
});

Answer 2

你可以说像

这样的话

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

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

使用JQuery移动到页面的不同部分

2 个答案: