如何将滚动条滚动到页面中心？

Question

I am following this post.

Scroll to the center of viewport

I do like the answer but when I use it, I got an error in my console.

  $('body').animate({
      scrollTop: $(this).offset().top - ($(window).height()-$(this).outerHeight(true)) / 2
  }, 5000);

The error:

Uncaught TypeError: Cannot read property 'top' of undefined

I am not sure why $(this).offset() is undefined . Can anyone help me about it?

Thanks!

Answer 1

Instead of using $(this) , use $('body').offset() instead. Looks like $(this) is referring to the window object which has no offset property.

Answer 2

You need to mention what "this" stands for. In the post you mention, they are using the 'img' tag. Use this instead:

$( document ).ready(function() {
    $('body').animate({ scrollTop: $('body').offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 500);
});

Also, you might want to change the 5000 at the end to a smaller number. Else it will take 5 seconds to scroll to the center of the page.