jQuery scrollTo fixed header offset

Question

I am using the jQuery scrollTo plugin as you can see on the page which I'm building http://portfolio.tomvervoort.net/

Because of the 300px fixed header the content moves under the header. You can see this clearly when you click the about button in the menu. Is it possible to add an 300px offset to the scrollTo script so everything stays positioned under the header/menu?

Can we have the code in the question please so the abbreviated answer below makes sense! — Chris Pink
– Chris Pink, Commented Sep 17, 2019 at 15:18

Andy · Accepted Answer · 2014-02-06 10:22:42Z

21

You could try changing this line in jquery.nav.js:

$.scrollTo(newLoc, o.scrollSpeed, {

to

$.scrollTo($('newLoc').offset().top-300, o.scrollSpeed, {

So instead of telling scrollto to scroll to exactly that element, you get the position of the element yourself and subtract 300

edited Feb 6, 2014 at 10:22

answered Jun 13, 2012 at 0:06

Andy

30.2k9 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Over a year ago

Awesome, Worked like a charm!

Chris Pink Over a year ago

Makes no sense without context

Andy Over a year ago

@ChrisPink i think it's not too hard to figure out the context from the answer even if the website from the question isn't online any more

Ariel Flesler · Accepted Answer · 2012-06-13 16:35:54Z

21

You can use the "offset" setting as described on:

http://flesler.blogspot.com.ar/2007/10/jqueryscrollto.html

Something like:

$.scrollTo(newLoc, o.scrollSpeed, {
     // ...
     offset:-300
});

answered Jun 13, 2012 at 16:35

Ariel Flesler

6221 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery scrollTo fixed header offset

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related