Question

I’m creating a split page with a menu on the left, and the main content on the right. When I click on a menu item, I want to scroll the main content to that item.

I found JavaScript scrollTo(), which takes offset arguments.

Is there any way to determine the offset of a particular <p> or other element within a <div>? Or perhaps there is another way to scroll to an element without knowing its offset?

EDIT

Thanks for the replies. Looks like everyone gave similar answers. However, I ran into a problems with this. It seems that offset().top (or position().top) return different values depending on the current scroll position.

My jsFiddle is here: http://jsfiddle.net/gBTW9/4/embedded/result/

If I scroll to the top and selection Section 4, it works as expected. But once I’ve scrolled, it stops working correctly. Can anyone see what is happening.

Answer 1

There are jquery methods offset and position stat can help there.

Also there is good scrollTo plugin which accepts elements and much more.