jQuery pagePiling - multiple sections sliding at once on first load

Question

I'm using a jQuery plugin called pagePiling, which works really well overall, but I'm experiencing a problem whereby some of the time it scrolls multiple page slides/sections at once. It only seems to happen when the page first loads - if I refresh the page several times, it works correctly.

Here's the site in question:

http://baytree-demo.co.uk/hannover/

It may load correctly for you and you won't be able to see the problem.

There are four sections on the homepage. The first and last contain photo backgrounds, whereas the other two are grey graphic/map based. When the problem occurs, it just scrolls from the first to last section - instantly flicking past the middle two. You can see this in the page URL, as the #section-name will change rapidly.

Thank you.

Answer 1

Fixed it. Posting the solution in case it helps anyone else.

I was also using a checkSize jQuery function to help with other responsive elements - as seen here:

https://www.fourfront.us/blog/jquery-window-width-and-media-queries

With the pagePiling code inside this function, the scrolling effect breaks whenever the browser is resized (reverts to just animating between first and last slide) and also the #pp-nav div gets added to the bottom of the page again with each resize event.