make the page scroll to show the full contents of a div element?

I'm using a simple javascript toggle function to expand a div to show its contents. If the div is near the bottom of the screen, it开发者_运维技巧 expands and some of the div disappears off the screen.

How can I get the page to automatically scroll down to make sure the div is in view?

Each element on your page, including your DIV, will have a set of offset values relative to the document. You can get these via the $.offset() method. This will give you the x and y coordinates to the element on the page.

There are many plugins that exist in the wild (such as $.scrollTo() by Ariel Flesler) which will animate scrolling of your page for you, and even do so via a set of provided coordinates. You would join these two items together to automate a scrolling to the offset coordinates of your DIV.

Just make sure your DIV isn't taller than your viewport, or else you'll need to scroll even more to see all of it.