Question

I have a table of items. Each item has detail. The table alternates between the item name and the item detail. I give each item row an “item-name” class and each item detail row an “item-detail” class. When the page loads, I hide all of the item-detail rows so that only the item-name rows are visible.

When the user clicks on an item-name row, it shows (expands) the item-detail below that row. If the user clicks a different item-name, it closes the open item-detail and opens the item-detail that corresponds to the new item clicked.

I want the page to scroll to the item-name that is clicked, much in the same way anchor tags can be used to move to different parts of a page. Right now, if a user clicks on an item name that has a lot of text in an item-detail, the user may have to scroll down to read it all. If the user then clicks the next item-name, it will close the above item-detail and open the new item-detail. But because the first item-detail was so long, the new item-name and item-detail are actually above the window’s scrolled view. They are expanding right below the previous item, but the user has previously scrolled below this point.

I considered naming all of the item-name rows and using jquery to call name using an anchor tag of sorts, but this seems suboptimal.

Is there jquery that would refocus the window such that the clicked item-name is at the top of the page?

Answer 1

This should work:

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