When I click the Add Dependent link button, I wanted the scroll bar to automatically scroll to the bottom, and it does just that. However, there is a small issue after the postback where the text "Please fix the following problems:" briefly appears, even though there are no error messages displayed below it. The jQuery validation plugin works correctly when there are actual validation problems.
Thank you!
Below is the relevant ASP.NET code snippet:
<script type="text/javascript" language="javascript">
function scrollToBottom(id) {
document.getElementById(id).scrollTop = document.getElementById(id).scrollHeight;
}
</script>
<div id="divscroll" class="scroll"></div>
<div id="validationMessageContainer" class="error" >
<span id="info_dep_fix_problemls">Please fix the following problems:</span>
<ul></ul>
</div>
<asp:LinkButton ID="AddDependent" Text="Add Dependent" CssClass="btngeneral" OnClientClick="scrollToBottom('divscroll')"
OnClick="AddDependent_Click" runat="server" />
C# Code behind:
protected void AddDependent_Click(object sender, EventArgs e)
{
//Other unrelated code -- the button needs to be server side for database connections, etc.
getScrollPosition();
}
protected void getScrollPosition()
{
//Sets the scroll position of the divscroll element to the bottom on postback
ClientScript.RegisterStartupScript(this.GetType(), "toBottom", "scrollToBottom('divscroll')", true);
}
Here is the CSS for styling the scrolling div:
div.scroll
{
-ms-overflow-x:hidden;
overflow-x:hidden;
-ms-overflow-y:auto;
overflow-y:auto;
max-height: 400px;
max-width: 900px;
}