title: how do I scroll to bottom during a jquery load function
body: <p>I am having a little difficulty. I need my jquery script to load content, but for it to load at the bottom without the page bouncing from top to bottom like crazy.</p>
  
  <p>Note: the content load works fine, I just want it to load always at bottom unless of course the user scrolls; I already have the scroll detection working, I just need help getting it to be default bottom.</p>
  
  <p>here is my script:</p>
  
  <pre><code>var refreshId = setInterval(function()
  {
       $('#chatter').load('chat-panel.php');
  }, 1500);
  </code></pre>
  
  <p>I need the scroll to be within the .load section to it remains at the bottom as default.</p>
  
  <p>however my messages are stored in another div tag</p>
  
  <pre><code>&lt;div id="messages"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Also note that inside this tag is some php data that is gathered from a database which is the reason I left it blank.</p>
  
  <p>This is the overall #chatter html:</p>
  
  <pre><code>&lt;table style="&lt;?php if(isset($_SESSION["chat"])) { echo "table-layout:fixed; max-height:445px; height: 445px;"; } else { echo "height:70%;"; }?&gt; width: 80%;" align="center" border="1"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;div id="chatter" style="height: 100%; width: 100%;"&gt;&lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td height="100;"&gt;&lt;iframe id="sendit" frameborder="0" scrolling="no" src="message.php" style="width: 100%; height: 100%;"&gt;&lt;/iframe&gt;&lt;/td&gt;      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>This is what loads inside the #chatter div (chat-panel.php):</p>
  
  <pre><code>&lt;table style="height: 100%; max-height: 430px; width: 100%;" id="chattytable" border="1"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td valign="bottom" id="inc"&gt;&lt;?php include("chat.php"); ?&gt;&lt;/td&gt;
        &lt;td width="20%" valign="top"&gt;&lt;?php include("users.php"); ?&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The chat.php include contains the content for the:</p>
  
  <pre><code>&lt;div id="messages"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>here is the CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #messages {
          color: #514F4F;
          overflow-y: scroll;
          overflow-x: hidden;
          height: 100%;
          max-height: fit-content;
      }
      ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-button {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    background: #31143d;
    border: 0px none #ffffff;
    border-radius: 100px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
  }
  ::-webkit-scrollbar-thumb:active {
    background: #000000;
  }
  ::-webkit-scrollbar-track {
    background: #562176;
    border: 0px none #ffffff;
    border-radius: 100px;
  }
  ::-webkit-scrollbar-track:hover {
    background: #6a2075;
  }
  ::-webkit-scrollbar-track:active {
    background: #73287b;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
      #inc {
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      #chat_wrap {
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>I hope I explained the layout properly, please don't hesitate to ask if you get confused. All I ask is that you don't judge my coding, I am here to learn as much as you are :D</p>