[jquery] Finding the position of bottom of a div with jquery

I have a div and want to find the bottom position. I can find the top position of the Div like this, but how do I find the bottom position?

var top = $('#bottom').position().top;
return top;

use this script to calculate end of div

$('#bottom').offset().top +$('#bottom').height()

The answers so far will work.. if you only want to use the height without padding, borders, etc.

If you would like to account for padding, borders, and margin, you should use .outerHeight.

var bottom = $('#bottom').position().top + $('#bottom').outerHeight(true);

var bottom = $('#bottom').position().top + $('#bottom').height();

This is one of those instances where jquery actually makes it more complicated than what the DOM already provides.

let { top, bottom, height, width, //etc } = $('#bottom')[0].getBoundingClientRect();
return top;

var top = ($('#bottom').position().top) + ($('#bottom').height());

EDIT: this solution is now in the original answer too.

The accepted answer is not quite correct. You should not be using the position() function since it is relative to the parent. If you are doing global positioning(in most cases?) you should only add the offset top with the outerheight like so:

var actualBottom = $(selector).offset().top + $(selector).outerHeight(true);

The docs http://api.jquery.com/offset/

The bottom is the top + the outerHeight, not the height, as it wouldn't include the margin or padding.

var $bot,
    top,
    bottom;
$bot = $('#bottom');
top = $bot.position().top;
bottom = top + $bot.outerHeight(true); //true is necessary to include the margins