Same here. From another page it doesn’t work, it stops at half of another section, etc.
I have also noticed in IE and Firefox the spots where you end up when coming from another page are different, but both incorrect.
A fix would be great!
Plugin Author
malihu
(@malihu)
Hello,
‘Page scroll to id’ does not animate pages based on location hash (at least not directly).
When clicking a link in the form of mysite.com/page#id from another page, the browser “jumps” to the location hash (#id). This is the default browser behavior which the plugin does not affect at all.
To prevent this behavior and have the plugin handle it instead, you need to create a custom script and place it in your theme manually.
For reference, I’m posting a working script for scrolling to url hash on page load:
<script>
(function($){
if(location.hash){
$(window).scrollTop(0); //stop jump to hash straight away
setTimeout(function(){
//stop jump to hash again a bit later
//for browser compatibility
$(window).scrollTop(0);
},1);
}
$(window).load(function(){
if(location.hash){
setTimeout(function(){
//use page scroll to id scrollTo method
//to animate page to location hash
$.mPageScroll2id("scrollTo",location.hash);
},1);
}
});
})(jQuery);
</script>
See this thread for more info.
Thank you for the code! It works, except it seems to remove the hover and active states. I tried deleting the script, but the override persists.
I tried installing the script on another production site, and it seemed to do the same, after installing the script, the hover and active states no longer works.
On further inspection it seems to be “stuck” on highlight.
I’ve created a staging site to demonstrate:
http://staging1.formatcreativedesign.com/
Plugin Author
malihu
(@malihu)
Seems that in your CSS you apply the green color on ._mPS2id-h and .mPS2id-highlight:
._mPS2id-h, .mPS2id-highlight {
color: #6EA645 !important;
}
._mPS2id-h class indicates elements that are eligible for highlighting so both of your links end up green. You only need to set .mPS2id-highlight which is the class of the highlighted element:
.mPS2id-highlight {
color: #6EA645 !important;
}
Hi, Thanks for the help, I really appreciate it!
I think that there is more going on there. I’ve fixed the code, but the hover effect is still not working. It was working properly before I added the Jquery script. I added the CSS after I started having the issue, and I’m afraid that I confused matters by adding it. I deleted the offending CSS and revised it as you suggested. But the problem persists.
It seems as if (for some reason) the Jquery is forcing the “.menu-primary li.current_page_item a, .menu-primary li.current-cat a, .menu-primary li.current-menu-item a” to overide all other menu classes (you can see that if you remove the “color: #0000” the menu seems to work properly. This is also apparent in the other site I’m having this issue with.
When I tested this on a clean install without the Jquery added, the code isn’t overridden, but when I add the Jquery does get overridden.
It’s almost like the jquery is telling the browser that all of the scroll “areas/links” are active?? Maybe. Or I’m actually going crazy trying to figure this out 🙂
Plugin Author
malihu
(@malihu)
You can probably use the CSS :not() selector, changing:
.site-header .genesis-nav-menu li.current_page_item a, .site-header .genesis-nav-menu li.current-cat a, .site-header .genesis-nav-menu li.current-menu-item a
to:
.site-header .genesis-nav-menu li.current_page_item a:not(._mPS2id-h), .site-header .genesis-nav-menu li.current-cat a:not(._mPS2id-h), .site-header .genesis-nav-menu li.current-menu-item a:not(._mPS2id-h)
That didn’t work… on further inspection, I noticed that the URL no longer shows the jump address. Maybe that is a part of the issue?
Plugin Author
malihu
(@malihu)
Scrolling to id when coming from another page feature is now added in version 1.5.5. Check “Scroll to location hash” option in plugin settings to enable.
