jQuery: Scroll to the center of the element

Question

I am working on a jQuery function that scrolls to the div on click. Right now it will scroll to the top, I was wondering if their was a way to make it scroll to the center of $('.scrollit') instead of top, or possibly a way to offset it by some pixel amount?

$(".playbox").on('click', function () {
    $('.scrollit').animate({
        scrollTop: $(this).offset().top
    }, 1000);

Answer 1

You can use the height of the element.

scrollTop: $(this).offset().top + $(this).height() / 2;

Add the half of the height of the element to the scrollTop to scroll to the center of the element.

Answer 2

There are two major difference to the other answer. Its relevant if you add or remove offset, so I exchange the plus with a minus. And I use the screen size as reference and not the element. To animate the scrolling and wrap in a function is optional.

function scrollTo (id) {
   $('html,body').animate({
      scrollTop: $("#"+id).offset().top - $(window).height()/2
   }, 1000);
}