0

アイテムの表があります。各アイテムには詳細があります。テーブルは、アイテム名とアイテムの詳細を交互に表示します。各アイテム行に「item-name」クラスを付け、各アイテム詳細行に「item-detail」クラスを付けます。ページが読み込まれると、アイテムの詳細行をすべて非表示にして、アイテム名の行のみが表示されるようにします。

ユーザーがアイテム名の行をクリックすると、その行の下にアイテムの詳細が表示（展開）されます。ユーザーが別のアイテム名をクリックすると、開いているアイテムの詳細が閉じられ、クリックされた新しいアイテムに対応するアイテムの詳細が開きます。

クリックされたアイテム名までページをスクロールしたいのですが、アンカータグを使用してページの別の部分に移動するのとほぼ同じ方法です。現在、ユーザーがアイテムの詳細に多くのテキストを含むアイテム名をクリックした場合、ユーザーはすべてを読むために下にスクロールしなければならない場合があります。次にユーザーが次のアイテム名をクリックすると、上記のアイテムの詳細が閉じられ、新しいアイテムの詳細が開きます。ただし、最初の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 に答える