Scroll to element and position it in the middle of view

Question

I'm trying to autoscroll to the middle row in the order book.

I have orderBook div, in which table with orderBook is placed. And one of the rows of that table has an id middleRow. What I'm trying to do is to scroll and position that row in the middle of the orderBook.

Expected result is shown on the picture:

I've tryied jQuery scrollTo function, but it puts middle row on top of the screen, as shown below:

$('#orderBook').find('.tableBody').scrollTo('#orderBookMiddleRow')

Answer 1

http://demos.flesler.com/jquery/scrollTo/

You can specify an offset for your scroll like this:

$('#orderBook').find('.tableBody').scrollTo('#orderBookMiddleRow', 500, {offset: -$(window).height() /2})

Here's a really simple proof of concept: http://jsfiddle.net/6k8asog1/

Edit: Here's OP's revised code for scrolling to the center of #orderBook, rather than the window:

$('#orderBook').find('.tableBody').scrollTo('#orderBookMiddleRow', 500, {offset: $('#orderBook').offset().top - $('#orderBook').height() - $('#orderBookMiddleRow').height() })