Page scroll to id does not work with elements of the same page

Hello,

I don’t know how you added the side links but the plugin is not enabled to handle them. Go to plugin settings and change the “Selector(s)” field value to:
a[href*=#]:not([href=#])

Save changes and test again. Let me know ??

With the selector that you gave me now it works!!
Thank you!!

About the side links, I simply created a secondary side menu and I set custom links linking to the Page to scroll id targets, for example:
https://pntlab.cnit.it/technical-areas/#high-capacity
where “high-capacity” is what I set as id in the Page to scroll id widget.

This is a very well done plugin and the your support is fast and effective, thank you again!

Malihu, I found one more problem: I set a 120 pixels offset to properly show the desired element with its title in the middle of the page, but this offset is not applied when you click on the link of the element the first time, it is applied only after the sencond click. For example, you are in HOME and you click on HIGH-CAPACITY SECURE OPTICAL COMMUNICATION in the right-side menu, the offset is not applied; but if now you click once more on HIGH-CAPACITY SECURE OPTICAL COMMUNICATION the offset is applied!
Do you have an idea of the reason?
Thank you again

by now I more or less solved by positioning in a “clever” point the Page to scroll id widgets, so that I obtain an acceptable position in both cases, which are if I click for the first time on the desired technical area and if it is the second/third/fourth… click already. But the problem persists anyway, I do not know if it is a bug of a problem due to my theme/configuration/capabilities ??

I’m re-posting my reply because for some reason I can’t see it ??

Plugin’s offset is always applied. The issue you describe happens because of the way the theme works. Let me explain what happens:

When the page has not scrolled at all (is on the very top), the header (#masthead) height is 113 pixels. When you scroll the page a bit and the top menu becomes sticky, the header height becomes 0 pixels.
Now, because of the way the theme is laid-out, this 113 pixels difference is not compensated by any element (no element fills this “gap” or empty area). This means that the page’s height changes (+/- 113px) on-the-fly while the page is scrolling. This makes every element in the page to have different top position according to page scrolling.

That’s why when you click the link while the page is on the very top scrolls to different position than when the page is already scrolled and the top header is sticky.

I hope I make sense because it’s a bit technical issue ??

So, the only solution possible is to “fill” this 113 pixels “gap” when the top menu becomes sticky.
Fortunately, the theme applies a special class (shrinked) to toggle menu’s style (change its height, make the menu sticky etc.), so we could use this class in order to add an extra 113px top margin (not visible to the user) on the header’s next sibling element (which is the #page element).
Try adding the following rule in your CSS:

#masthead.shrinked + #page {
    margin-top: 113px;
}

The rule above means:
Add a 113px top margin to the #page element which is right after #masthead but only when #masthead has the class shrinked (it sounds more complicated than it actually is hehe)

Hope this helps

Hello there,

I’m having a similar problem on this site: https://dpnetadmin.wpengine.com/

The Contact Us link and Donate button in the main navigation are supposed to scroll down to those elements tagged on that page. For some reason they do not work on the Home page but they do work from the “Artist Submissions” page. Do I also have a problem with Selectors? What other info can I give you that would help you figure it out?

@mornia Hello,

This is a known issue which will be fixed in the next version.
The solution is already implemented in development version, so you can use it now.
Please (re)download and (re)activate the plugin from the link below and the issue will be fixed:
https://downloads.www.ads-software.com/plugin/page-scroll-to-id.zip

Let me know if you need any help

Malihu,
what to say, thank you so much, I suspected that it was a problem related to the behavior of the header, and I know how to deal with some CSS but I couldn’t find a proper way to solve that problem. Thanks to your clever solution now it perfectly works!
Also your technical explanations of the problem and of the applied CSS rule are exemplary!
I’ve already written a very positive opinion about your plugin and I am considering a donation as a symbolic thanksgiving.
Thank you again!

@gabriwordpress Thanks a lot for your comments, review and any future donation! Glad I helped ??
I’m marking this post as resolved but if you need more help let me know.

@malihu,

Thanks so much for all the help. I am impressed by the quick and awesome support on this! The development version you sent does fix the issue. Thank you for sharing that. I do have one more question if I may. If you go the url: https://dpnetadmin.wpengine.com/ and then click Contact Us or Donate in the main navigation, there’s a bit of a stutter before it scrolls to the correct section. This only seems to happen when the page is first loaded. If you click those links again after that, it scrolls perfectly. Do you know if there’s any way to fix that weird stutter when the page first loads? It almost looks like it tries to instantly go to the section, then jumps back up at the top of the screen and scrolls down like it should.

Thanks again for the great support!

@mornia You’re welcome ??

The stutter happens because of the way your theme switches the sticky header/top menu. It’s basically the same issue as I posted in my reply above (https://www.ads-software.com/support/topic/page-scroll-to-id-does-not-work-with-elements-of-the-same-page/#post-8945248).

You can confirm this by scrolling the page (via browser’s scrollbar) slowly from the very top. You’ll notice that this stutter still occurs the moment the header becomes sticky (with darker background color). It’s a theme issue.

To fix it you need to remove/comment the following CSS from you theme’s stylesheet (...themes/eventox/includes/css/style.css):

body.headroom--not-top {
    padding-top: 122px;
}

Removing the rule above will make scrolling from/to the top much smoother and eliminate any stutters.

@malihu I was thinking it had to do with the sticky header somehow, but I couldn’t figure out exactly how to fix it. Thank you so much for all the help. I’m very grateful for the fast responses and the detailed explanations on the fixes. Heading over now to give you a 5-star review. ??