Controlling visibility via scrolling

[Chris.Nelson]

I have a table full of inputs and there are times when I want to set the focus to a specific input but if the table is large enough or the window is small enough, the input may be scrolled out of view. I know I can do inputElement.focus() to put the input cursor in the element but can I determine if the element is in the view and force the window to scroll so that it is?

[Ize]

If your elements contain ids, you can simply add a hash to the current URL, like this:

window.location.hash = "myId";

The URL now looks like "www.yourdomain.com/#myId", and will automatically scroll to the element with id "myId".

[Chris.Nelson]

... I'd rather not change the URL that shows up in the address bar or that's used when the user reloads the page.

[Kravvitz]

Don't browsers automatically scroll down if you give focus to a form control?

You can use scrollIntoView(), which seems to be supported by IE5+/Win, Firefox, Netscape 7.0+, Opera 9+, and Safari 2+.

[Chris.Nelson]

Don't browsers automatically scroll down if you give focus to a form control?

At least not Firefox 2.x.

You can use scrollIntoView(), which seems to be supported by IE5+/Win, Firefox, Netscape 7.0+, Opera 9+, and Safari 2+.

That sounds promising. I'll try it when I get back to the office.

[Chris.Nelson]

scrollIntoView() was just the thing.