JQuery를 사용하여 페이지의 다른 부분으로 이동

Question

항목 테이블이 있습니다. 각 항목에는 세부 정보가 있습니다. 테이블은 항목 이름과 항목 세부 사항을 번갈아 표시합니다. 각 항목 행에 "item-name"클래스를 지정하고 각 항목의 세부 행에는 "item-detail"클래스를 지정합니다. 페이지가로드되면 item-name 행만 볼 수 있도록 모든 항목 - 세부 행을 숨 깁니다.

사용자가 항목 이름 행을 클릭하면 해당 행 아래 항목 세부 정보가 표시 (확장)됩니다. 사용자가 다른 item-name을 클릭하면 열려있는 item-detail이 닫히고 클릭 된 새 항목에 해당하는 item-detail이 열립니다.

클릭 한 항목 이름으로 페이지를 스크롤하려면 앵커 태그를 사용하여 페이지의 다른 부분으로 이동할 수 있습니다. 지금 사용자가 항목 세부 정보에 많은 텍스트가있는 항목 이름을 클릭하면 사용자가 아래로 스크롤해야 모든 내용을 읽을 수 있습니다. 그런 다음 사용자가 다음 item-name을 클릭하면 위의 item-detail을 닫고 새 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; 
} 

처럼 somehting 말하고 요소를 클릭했을 때 또는 당신이 jQuery의 scrollTo 방법을 사용할 수 있습니다, 그것을 부를 수