jQuery one page scrolling in wrong places

On my one page website at http://s361608839.websitehome.co.uk/pt-build/templatebuild/ if you click on a top menu option the page scrolls down to each section on the page.

Problem when it does scroll, the top part of the page 开发者_Python百科is covering up the top part of the sections.

Is there anything I can do to my CSS to stop this from happening?

Thanks.

---

Replace some of your margin with padding. When jumping down the page to anchor spots like this it jumps to the edge of the inner box, outside of padding and inside border / margin. What you need to do is move that imaginary line up away from the content inside the div, so increase the padding and decrease some margin to keep the design working.

I did some playing around with your site, modifying to see how it would work for your trainingsessions section, I got this CSS:

margin-top: 0;
padding: 120px 350px 30px 0;

---

To adjust it with pure CSS, add an additional 151px (the height of your #topwrap element) to the padding-top of each navigable div. Then subtract 151px from the margin-bottom of each preceding navigable div.

A simplified version of this (you'll need to do the math to make it work with your already existing margins and paddings) would look like:

#div1 { /* first navigable div */
  margin-bottom: -151px;
}
#div2 { /* all intermediate navigable divs */
  padding-top: 151px;
  margin-bottom: -151px;
}
#div3 { /* last navigable div */
  padding-top: 151px;
}

Alternatively, you can adjust the scrolling position in the javascript by the 151px height of the #topwrap.