how to position scroll to bottom of jquery dialog box?

Question

I have a page on which I am opening a jquery dialog box.Inside jquery dialog box,there are few text boxes and a button.Clicking on button adds a new text box.As more than 3-4 text boxes getting added, scroll comes inside jquery dialog boxes. By default,this scroll is on top, I want this to be placed at bottom.

<div style="display: none">
            <div id="dialogform" style="background-color: #f7f6ed; padding:0px 0px 0px 0px;
                border-left: solid 1px #7aaacd; border-right: solid 1px #7aaacd; border-bottom: solid 1px #7aaacd;
                border-top: solid 1px #7aaacd;">
                <div style="overflow:auto; height:85%; border-left: solid 1px #7aaacd; border-right: solid 1px #7aaacd; border-bottom: solid 1px #7aaacd;
                border-top: solid 1px #7aaacd;" class="inner">
                        <table style="width: 100%;">
                            <tr style="display:none;" id="trUSM">
                                <td colspan="2">
                                    <fw:UserAssistSection runat="server" ID="lbuserAssist" />
                                </td>
                            </tr>
                            <tr>
                              <td colspan="2">
                                    <table id="lbtbRvalueMain"  width="300px" >

                                                 <tr>
                                                    <td class="sectDataField_label" style="font-weight:bold;text-align:right"  align="right">
                                                        <%=Mitchell.Globalization.CultureAPI.GlobalizeString("Questionnaire", "Qusnnr_Category")%>:
                                                    </td>
                                                    <td class="sectDataField_label" style="font-weight:bold;text-align:left"  align="left">
                                                       <span id="catName" class="formField" style="font-weight:normal;"></span>
                                                    </td>
                                               </tr>
                                               <tr>
                                                    <td class="sectDataField_label" style="font-weight:bold;text-align:right"  align="right">
                                                      <%=Mitchell.Globalization.CultureAPI.GlobalizeString("Questionnaire", "Qusnnr_Label_Score")%>:
                                                    </td>
                                                    <td>
                                                      <span class="formField" style="font-weight:normal;">In</span><span id="ScoreMethd" class="formField" style="font-weight:normal;"></span>
                                                    </td>
                                               </tr>
                                                <tr  class="sectFormField_control">
                                                        <td></td>
                                                        <td>
                                                          <table id="tblScores">
                                                              <tr>

                                                                   <td>
                                                                    <input type="text" id="lbtxtRScore1"  class="lbansScore" style="FONT-FAMILY: Arial;FONT-SIZE: 11px;width:51px"  />
                                                                   </td>

                                                               </tr>
                                                          </table>
                                                        </td>
                                                </tr>            

                                                <tr style="text-align:left" id="trAddRange">
                                                <td></td>
                                                   <td  style="text-align:left" align="right"  class="sectDataField_label"> 
                                                      <a  id="A1" style="color:#035388;" href='javascript:AddRange()'><u>Add Score</u></a>
                                                   </td>
                                                </tr>
                                  </table>
                                </td>
                            </tr>
                        </table>

                    </div>
                     <table style="width:100%;">
                          <tr style="background-color: #E5E3D6">
                        <td align="right" colspan="2" style="height: 20px">
                            <table>
                                <tr>
                                    <td>
                                        <fw:Button ID="btnSaveScore" runat="server" CausesValidation="false" OnClientClick="button.setSpinner($('span.btnSaveScore'));AddCustomScores();"
                                            Text="<%$ Resources:Questionnaire, Thresholds_ButtonSave %>" />

                                    </td>
                                    <td>
                                        <fw:Button ID="btnCancel" runat="server" CausesValidation="false" OnClientClick="$('#dialogform').dialog('close');"
                                            Text="<%$ Resources:Questionnaire, Thresholds_ButtonCancel %>" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                      </tr>
                 </table>
                </div>
            </div>
        </div>

Answer 1

You may want to try below code once your dialog opens:

$('#dialogform').scrollTop($('#dialogform')[0].scrollHeight);

You can use above code in Open:function{} if you're using Jquery UI.