CODEWITHSUNDEEP
jquery
Prosto Trader
Prosto Trader

Reputation: 3527

Scroll to element and position it in the middle of view

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:

enter image description here

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

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

enter image description here

Upvotes: 5

Views: 7422

Answers (1)

Casey Rule
Casey Rule

Reputation: 2085

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() })

Upvotes: 11

Related Questions