To get started, we are going to select the messages container creating a new variable to store that in. We're going to actually be creating quite a few variables to run our calculation, so I'm going to add two comments, Selectors and Heights. This is going to help us just break up the long list of variables.

We can make a variable, we'll call this variable messages, and we're going to set messages equal to a jQuery selector call. We're going to select all elements with an ID equal to messages, which is just our one:

function scrollToBottom () {
  // Selectors
  var message = jQuery('#message');

Now that we have messages in place we can focus on getting those heights. We are going to go ahead and fetch clientHeight, scrollHeight, and scrollTop. First up, we can make a variable called clientHeight setting that equal to messages, and then we're going to call a prop method, which gives us a cross-browser way to fetch a property. This is a jQuery alternative to doing it without jQuery. This makes sure it works across all browsers regardless of what they call the prop. We're going to go ahead and provide, inside quotes, clientHeight to fetch that clientHeight prop:

function scrollToBottom () {
  // Selectors
  var message = jQuery('#message'); 
  // Heights
  var clientHeight = message.prop('clientHeight');
}

We're going to do the exact same thing two more times for the other two values. scrollTop is going to get set equal to messages.prop fetching the prop scrollTop, and last but not least scrollHeight. A new variable called scrollHeight will store that value and we're going to set it equal to messages.prop, passing in the prop we want to fetch scrollHeight:

function scrollToBottom() { 
  //selectors 
  var messages = jQuery('#messages'); 
  //Heights 
  var clientHeight = messages.prop('clientHeight'); 
  var scrollTop = messages.prop('scrollTop'); 
  var scrollHeight = messages.prop('scrollHeight');
}

Now that we have this in place we can get started with our calculation.