jQuery scroll to bottom of element not top

Question

I am using the following to scroll to an element

$("html, body").animate({
  scrollTop: $('selector').offset().top
}, 500);

The above code places the element at the top of the browser window when scrolled to it, is there a way I can scroll to the element with the scroll ending with the element at the bottom of the browser window?

Answer 1

Try something like this to put the scroll at the bottom of the element

$("html, body").animate({
      scrollTop: $('selector').offset().top + $('selector').outerHeight(true)
    }, 500);

Or this to put the element at the bottom of the scroll:

$("html, body").animate({
          scrollTop: $('selector').offset().top + $('selector').outerHeight(true) -$(window).height()
        }, 500);

Answer 2

You could use the height of the window to calculate your scroll position