Support » Plugin: Page scroll to id » Scrolling to the Proper place when comming from another page

  • Hi, Great Plugin!
    I based the offset on a class, which works great when visiting a link further down in the page. But, when I visit the spot on the page from anther page it seems not to use the offset at all.

    For instance I have a link further down on my homepage pointing to an a”about us” section on that page. When I click on the menu on the homepage it goes to that section with the proper offset.

    When I visit the about us section on the homepage from another page it goes to the about use section but the offset isn’t applied. Unfortunately I can’t set a static offset (in pixels) because this is a responsive site with a sticky header, so I had to use the header class to determine the offset (which works great except for this small issue.

    Can you help? (I can send you the link privately, if needed)

    https://wordpress.org/plugins/page-scroll-to-id/

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Scrolling to the Proper place when comming from another page’ is closed to new replies.