jQuery ScrollTo: (need a bit of help)

[itsjustjake]

Whats going on guys/gals,

So im familiar with the jQuery ScrollTo effect.. but I just cant seem to fully grasp how to customize it how I want / When I want.

I read through the jquery.com page for the effect, but couldnt really understand all that was said.

Effect Im going for:

header with navigation and logo in it at the top

then below that,
I have a wrapping Div with 3 separate divs inside of that wrap div.

each of those 3 divs have sliders in them..

my goal is to when clicked on 1 of the navigation links at the top of the page to have the content scroll to the anchor tag of corresponding div

ie: ABOUT MEDIA CONTACT
click on MEDIA, and the div id=”media” then scrolls to the middle of the screen.

HOWEVER: the header’s position is set to FIXED and I want the divs below that when sliding to slide under the header.

please shoot me some helpful information,

all the best,
itsjustjake

[jamygolden]

You need to retrieve the offset() of the element. Once you have the appropriate pixels from the top of the document, you can scrollTo() that position.

[clokey2k]

If the Header and links are 80px tall you can then scrollTo the target elements .offset() -80px. scrollTo goes moves the viewport to ‘x’px from the top of the document, so want to move 80px less (-80px).

If the header is going to change height you can get jQuery to calculate the height first.

[Author]

Posts