Tip : How To Scroll To Validation Summary

ASP.net by default calls the function window.scrollTo(0,0) after the validation failure from ASP.net validators but not always we have the validation summary control placed at the top. There are instances where we need to place validation summary at some other location but by doing this, instead the user being scrolled to see the validation error, he will always see the top of the page.

There are definitely multiple ways to overcome this and every single alternative has its own disadvantage. I will discuss one of such way which also comes with its own limitation.

The below javascript snippet can do our job.

window.scrollTo = function () { };

validationSummary.onpropertychange = function () {
     if (this.style.display != 'none') {
          validationSummary.scrollIntoView();
     }
}

At first we are disabling the scrollTo function so that the ASP.net will not be able scroll the page to the top of the page. After that we are tagging a function to “property change” event and whenever the summary control gets the display we are scrolling it to the view of the window.

However, the scrollTo function can also be customized to implement that the scrollTo(0,0) alone is ignored.