Scroll to ID not working from one page to the next

Hi,

I can’t re-produce the “funky dance” issue when clicking “Services” from the “Contact” page (the browser normally goes to the URL without anything weird happening).

In order to enable “Page scroll to id” to animate page scrolling when page loads (in addition to clicking links), you need to enable (check) the “Scroll to location hash” option in plugin’s settings.

BUT the above won’t necessarily “fix” your issue which is page not scrolling to the correct position of services section when the page loads.

The issue does not have to do with “Page scroll to id” (at the moment your URL hash is not scrolled by “Page scroll to id” anyway). It has to do with the way “Our portfolio” section is animating its inner elements.

Let me explain…
The moment the page loads, “Our portfolio” section height is zero. When elements animation effect is completed, its height has increased. The browser jumps to “#home-middle” (which is below “Our portfolio”) before this animation effect is done, so the position ends up wrong.

The reason it works correctly when clicking “Portfolio” is because its height change doesn’t affect its top position.

First, you should enable “Scroll to location hash” in plugin settings and see if it fixes the issue. If this doesn’t work, you should either disable the portfolio elements animation or give the portfolio element a CSS min-height value.

Hope this helps

Yeah this happens for the same reason, meaning the portfolio height is still animating (elements have a 0.8 seconds css transition from isotope) while the browser scrolls the page to services section, so the position ends up “wrong”.

There’s really not much you can do except some custom scripting which would scroll the page to the section after those 800 milliseconds. There’s no really any out-of-the-box solution for this (plugin or not).

If you feel a bit adventurous you can manually edit jquery.malihu.PageScroll2id-init.js in plugin’s directory and set a js timeout of say 0.9 seconds by hand to check it:

In line 72 of jquery.malihu.PageScroll2id-init.js change:
$.mPageScroll2id("scrollTo",_hash);
to:
setTimeout(function(){ $.mPageScroll2id("scrollTo",_hash); },900);

I know this sounds a bit “dangerous” but that’s the easiest/quickest code I can think 🙂 Otherwise it would need a custom script.

Yes exactly. You can lower a bit the transition (e.g. 0.5s) and lower the timeout to even 500ms.

Just take a note of this change (because you’re editing a plugin’s script), so if/when you update it to a new version (via wp admin), you can just redo the change in the script.