This website uses cookies to personalise ads and to analyse traffic ok
web design

Page scroll to id for WordPress


Knowledge Base – FAQ

Topics: General WordPress Menu Links highlighting Links Targets Page scrolling Offset jQuery/Javascript


Pages: 1 2


Post a comment

Comments pages: 1 4 5 6

  1. Gal
    Posted on September 1, 2019 at 15:33 Permalink

    I checked “Allow only one highlighted element at a time” and yet once I stop scrolling, two or more items on the menu are highlighted. seems like a bug.. any idea what I should do?

    Thanks, Gal.

    • Adam
      Posted on September 3, 2019 at 23:43 Permalink

      Same issue here. Please help. Thank you. –Adam

  2. Jim
    Posted on August 28, 2019 at 05:28 Permalink

    This is a multi-page site and I was hoping this plugin would not reload when clicking # links from the same page. Is there something in the setup that I am missing that would help with this?

    Try going to
    and then clicking on “About > Values” in the menu. You will see it reloads the whole page first. Would love it just to scroll when on the same page.


  3. Phoebe
    Posted on August 9, 2019 at 06:18 Permalink

    Hi, I’m using the theme Ovation. I can’t seem to get the right CSS selector to put in my offset. It just doesn’t work.

    If I don’t offset anything, it works perfectly well on my mobile, but not my pc. When I set 165 pixels as an offset, then it works fine for my pc, but not for my mobile.
    Any help would be appreciated!

  4. Eva
    Posted on August 5, 2019 at 00:53 Permalink

    Hey, I just discovered your plugin, and it really helped to get my anchors right. Thank you! Everything seems to be working fine, but one thing keeps me puzzled… When I go from a lower section to a higher section, it scrolls all the way up to the menu and back to the higher section from there. Can I do anything to avoid this? I am using WP + Generatepress Pro here

    Thank you!

  5. Stefan
    Posted on July 17, 2019 at 16:18 Permalink


    how can i recalculate the Positions for Highlighting (or maybe reinit the Plugin) when i have some Accordions inside the Content?

    When expanding a Tab from Accordion then the Menu (Sticky) is highlighted wrong (too early)

    I have already tried with the Options in the Plugin but with no success

    • malihu
      Posted on July 22, 2019 at 13:13 Permalink

      Can you post your page/site URL so I can check it?

  6. Florian
    Posted on July 16, 2019 at 12:57 Permalink

    Hey! Awesome Plugin with many settings, great.

    The smooth scrolling works perfect for links within the page but does not work from the menu / navigation.

    Please check out and click “Data protection products” ( It jumps to the right area but not smooth. When I scroll to the bottom of the page and click on the button “Free, fast and easy! Start now” then it is percectly smooth.

    Can you please help me to archive also smooth scrolling when I am clicking in the top menu “Data protection products” ?

    Thank you

    • malihu
      Posted on July 16, 2019 at 14:24 Permalink


      Your “Data protection products” top link does not have an actual URL with a valid id. Its URL is just #.

      You can test this by hovering your cursor over the link and seeing the URL at the bottom of the browser window

      This link (“Data protection products”) is handled by another script (I don’t know which one because your js code is minified, concatenated etc.). I can see the code that handles this link in the HTML:

      <script> jQuery(".tab-category > a").click(function() { window.location.href = "/en/start-en/#datenschutz-anbietervergleich"; }); </script>

      As you can see from the above, the script appends the actual URL programmatically when the link is clicked.

      I assume that the script does this because the link has a sub-menu, although I can’t say why it’s done this way.

      Note that this happens only on this particular link (because it has a sub-menu). If you create a new link in your top menu with a URL #datenschutz-anbietervergleich or /en/start-en/#datenschutz-anbietervergleich it will work as expected (just like “Free, fast and easy! Start now”).

      I don’t know if you’ve added the correct URL (e.g. #datenschutz-anbietervergleich) in your “Data protection products” link and the theme or another plugin removes it(?). In any case, when the page is loaded, the “Data protection products” link URL does not have a target id (just the hash).

      All this means that you cannot fix it with “Page scroll to id” because it’s not an issue with the plugin, so I can only explain what causes of the problem.

      Hope this helps

  7. Tiara
    Posted on July 9, 2019 at 01:22 Permalink

    So I have installed your plugin and have been using the # id tags in the menu custom-links and only 2 of the menu items are scrolling and I cannot figure out why. If I could get some help that would be great.

    • [email protected]
      Posted on July 10, 2019 at 04:20 Permalink

      Only 2 of my menu links are scrolling, I am confused as to why they all are not working when I have the url and the # the same. Please help. Thank you

      • malihu
        Posted on July 15, 2019 at 10:52 Permalink


        You links are not the same. The ones that have /home/ in their URL do not work because you don’t have home.

        You need to change your links to be like the “About”, e.g. and not

        In addition, your “OUR TEAM” button URL is not correct. It currently is:

        #Our Solar Experts

        It should be:


  8. Eric Bobrow
    Posted on July 3, 2019 at 11:48 Permalink

    I’ve installed your plugin but it isn’t working – clicks to in-page anchor links are jumping rather than scrolling. I tested another similar plugin and it scrolled OK, although doesn’t give nearly as much control as you offer; so I am confident my anchor links are set up OK however would really like to get your plugin to function.

    The page is the home page of a new site I have a sticky menu set up with links to each anchor section of the page.

    I’m using the standard selector:

    I tried adding the ps2id class to all of the anchors; this did not make any difference.

    I have checked the box to “Prevent other scripts from handling plugin’s links (if possible)” but it didn’t help.

    I’d be very appreciative if you have suggestions or can tell what needs to be changed to make the plugin scroll properly.

    Thanks in advance for your assistance!

    Eric Bobrow

    • malihu
      Posted on July 3, 2019 at 17:46 Permalink


      The issue is that “thrive-visual-editor” prevents “Page scroll to id” from scrolling the page. You did well by enabling “Prevent other scripts from handling plugin’s links” option but this option cannot always fix such issues, mainly because it depends on how the other scripts are handling the menu links.

      In your case, the “thrive-visual-editor” applies a click event on the link and its parent list-item, which stops the plugin from scrolling the page.

      I have no idea how the other plugin you tested was scrolling the page but my guess is that it probably created its own links (i.e. it did not use your theme’s menu links). I can;t really say though.

      You need to check if there’s an option in “thrive-visual-editor” to disable page scrolling for same-page links (i.e. links with # in the URL).

      FYI, the script that handles your menu links is this:


      If there’s no option to disable “thrive-visual-editor” from handling same-page links, then the only other way would be to manually edit the file above or add a special custom js script in your theme that’ll remove “thrive-visual-editor” events from both the link and its parent list-item element.

      • Eric Bobrow
        Posted on July 4, 2019 at 04:19 Permalink

        Thank you so much for answering so clearly. I worked around the issue by creating a version of the menu as plain text (with hyperlinks) rather than using Thrive Themes option for a custom menu element.

        While it was fiddly to get it styled nicely, the scrolling actions work perfectly. I appreciate your expert guidance on what was causing the issue, which allowed me to assess a reasonable work-around for the click event conflict.

  9. Thibaut
    Posted on June 29, 2019 at 01:30 Permalink

    Hello, I think I setup the thing properly but when I scroll nothing happens. It scroll to the other section only with mouse click. I guess I missed something?

    My theme is DIVI, the plugin is on, in CSS ID, I inputed 1,2,3,… as ID then on link I put #2,#3,#4… maybe that’s where I am wrong. I’ve read the post about DIVI many times but I am stupid, I cannot use it…

    • malihu
      Posted on July 1, 2019 at 15:40 Permalink


      Please tell me what page and which links to test.

      • Thibaut
        Posted on July 1, 2019 at 16:41 Permalink

        the homepge so

        Each image should bring to the next picture when scroll. Here I only succeed to do it on click…

        • malihu
          Posted on July 2, 2019 at 20:19 Permalink

          Your image links (with the arrow) do not have a target id. Their URL is just: #

          You should set the next image target on your links. For example, the first image link should be #2, the second #3 and so on…

          You should also go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option because your theme (or another plugin) has its own function for scrolling the page.

          • Thibaut
            Posted on July 2, 2019 at 21:46 Permalink

            Thank you.

            Actually for the arrow, that’s a theme option. I’ve assigned a target #2 to the module. Hence two things happen: when you click on the image it goes to the next picture (as you described above) then the arrow function does not work anymore.
            My question is why the scroll does not work in that case? only the click works.

          • Thibaut
            Posted on July 2, 2019 at 22:18 Permalink

            The pictures target ID is set (#2,#3,…) but on scroll nothing happens, is it normal?

          • Thibaut
            Posted on July 3, 2019 at 09:46 Permalink

            sorry, I meant on mouse wheel.

        • malihu
          Posted on July 3, 2019 at 17:57 Permalink

          It seems that your theme has its own custom way for scrolling the page by clicking links and via mouse-wheel. This prevents “Page scroll to id” (or any other similar plugin) from handling links and scrolling the page.

          The way your theme navigation works, you can’t really use other ways, other than its own functions, for page scrolling.

          • Thibaut
            Posted on July 3, 2019 at 19:07 Permalink

            OK, I see, Thanks for you time and help.

  10. Frances
    Posted on June 26, 2019 at 02:01 Permalink

    Do you have a short video demo, that shows clear up -close steps

    It would be most helpful
    I am trying to link from a text button to an image and also another one to a text on the same homepage.
    I am working on a localhost development pc. so I cannot give an URL
    Thank you in advance
    Really stuck right now

  11. Alfie
    Posted on June 8, 2019 at 06:43 Permalink

    Hi. Thank you for this nice plugin. I seem to be having trouble getting it to move to the correct positions. I tried using the offset to account for the sticky header. I assume it has something to do with the lazy loading. But even then some things seem very off. Wondering if you have advice about that. Specifically this link which seems to go very far past it’s id target point. Thanks for any feedback you can provide.

    • malihu
      Posted on June 8, 2019 at 16:29 Permalink


      The issue with the last link is because of the lazy loading of the images in the “OUR DONORS” section.

      On the desktop, these image placeholders have a height of 242 pixels but when the image is loaded, their actual height becomes 129 pixels. This is 113 pixels difference and since you have 4 rows, it’s 113*4 pixels.

      So, scrolling to “SPECIAL RECOGNITION” section the first time (before the “OUR DONORS” images are loaded), is off by about 400 pixels (the second time you click the link, it scrolls to the correct position since the images are loaded).

      This issue will happen with or without “Page scroll to id”. The only way to have lazy loading images and correct page scrolling is giving your image placeholders the same height as the actual images will have when loaded.

      Hope this helps

    • malihu
      Posted on June 8, 2019 at 17:09 Permalink

      In addition, “Page scroll to id” provides an option to deal with such issues, so try the following:
      Go to plugin settings and enable “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option. Save changes and test.

      • Alfie
        Posted on June 8, 2019 at 17:50 Permalink

        Hi. Thanks so much! I did click “Verify target” option, but it doesn’t re-adjust. However, I will try sizing the place holders and let you know.

    • Alfie
      Posted on June 8, 2019 at 19:09 Permalink

      I set a max-height on the image containers and it worked! Thanks so much for the advice!

      The only thing now (and it’s not a big deal) is that there are internal links on this page that are not smooth scrolling.
      You will find them in the “Classes” area in the descriptions where the instructor’s names are linked. I added the ps2id class to the links, but they still jump instead of being smooth. Any idea how to fix?

      Thanks again!

      • malihu
        Posted on June 8, 2019 at 19:20 Permalink

        These links seem to be handled by the “wp-accessibility” plugin, which prevents “Page scroll to id” from scrolling the page. The script that handles them is this one:


        I saw that you’ve already enabled “Prevent other scripts from handling plugin’s links” option, which means that you’d have to manually edit this script or deactivate the “wp-accessibility” plugin or add an extra js code to your theme template.

        Let me know

        • Alfie
          Posted on June 11, 2019 at 01:23 Permalink

          Ah! I see. Okay. I prefer to keep the accessibility plugin. The page jump on these links is not a big deal. Thanks for looking into it!

  12. Alan
    Posted on June 6, 2019 at 17:44 Permalink

    Great plugin! I do have one small issue I can’t seem to figure out. I use Divi and I can’t get the offset option to work on my fixed navigation on mobile and tablet. The navigation is fixed on desktop and works flawlessly, however, not so much on the mobile and tablet.

    Can you please help me with this? If you need any more information from me, I’d be happy to share.

    Thanks again for a great plugin!

    • malihu
      Posted on June 6, 2019 at 18:47 Permalink


      This happens because Divi theme has its own function for scrolling the page. This prevents “Page scroll to id” from doing its thing.

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Also change the “Offset” option value to:

      .et_fixed_nav #main-header

      Save changes and test.

      Let me know 🙂

  13. Andy Bratton
    Posted on June 3, 2019 at 03:35 Permalink

    Hey there,

    Awesome work. Thanks so much for building this. One small issue: I can’t seem to get the “Allow only one highlighted element at a time” and
    “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)” options to work as expected. I have them selected in the plugin settings and I’m still seeing the opposite behavior. Can you assist?

    Thank you!


    • malihu
      Posted on June 3, 2019 at 15:48 Permalink


      In order to use these options effectively, you need to limit which links get highlighted. You can do this by going to plugin settings and setting the “Highlight selector(s)” option to:

      #StickyProjNav .menu-item a

      Save changes, test your page and let me know

      • Andy Bratton
        Posted on June 4, 2019 at 05:29 Permalink

        Hey there,

        That definitely helped, but I still cant get the roll-over highlighting to work.

        Also, is such a menu depoly-able to multiple pages on the same site? I’m having trouble getting that to work as well but it may be a function of whatever I’m missing.

        Thanks for your help,


        • malihu
          Posted on June 4, 2019 at 14:19 Permalink

          Most likely yes. You’d have to ask the menu plugin developer on how to use it on multiple pages.


Comments pages: 1 4 5 6

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>