Select an element and position it in the middle

Question

I am trying to autoscroll the middle row in the order book.

I have an orderBook div that hosts a table with orderBook. And one of the rows in this table has id middleRow. What I'm trying to do is scroll and place this line in the middle of the order.

The expected result is shown in the picture:

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

$ ('# order book'). Find ('tableBody'). ScrollTo ('# orderBookMiddleRow')

Answer 1

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

You can specify the offset for your scroll as follows:

$('#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 the updated OP code to scroll to the center of #orderBook, not to the window:

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