How to ensure an element in view when a webpage is opened?

What are some effective strategies to ensure a specific control is in view when a page is opened?

More specifically, I have a validation message which appears beneath the fold, and I want to ensure it is seen when necessary.

I considered using a bookmark (named anchor) but there is no clean way to use it, since I only realize there is an error after I've processed the page.

This won't matter with most expected solutions, but I'm adding the tag, in case there is anything funky in the framework that might help me.

And yes, jQuery solutions are ok.


Answered on Twitter by David Wolever

document.onload = function() { location.href = "#foo" }

You could make use of the scrollIntoView call in Javascript to do this - it will give you roughly the same result as an anchor, but you can do the call specifically when you need to scroll the error into view.

You can also use jquery to do it, like so:


This sounds like a usability problem that you are trying to solve with code. The validation message should be closer to the control in question or else they won't seem related.

The simplest way: Create an anchor tag next to your control, give it a name and load file.html#anchorname.

If changing the url is not possible, you can call focus on an anchor element and that will scroll it into view

Need Your Help

How to replace all found ocurrences in a Google Docs for an hyperlink

replace hyperlink google-apps-script google-docs

We are actually wondering how can you for example find Bible verses in the document text and replace them for an URL of the verse on the web.