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

Using Page scroll to id with Elementor Page Builder

A quick guide for using “Page scroll to id” WordPress plugin with Elementor Page Builder on your WordPress site.

In WordPress admin, go to SettingsPage scroll to id and make sure the Selector(s) option value is:


Scroll down to “Advanced options” section and enable (check) “Prevent other scripts from handling plugin’s links” option.

Click Save Changes.

Elementor Page Builder allows us to enter an id value for each element we want (via the CSS ID field). This is very handy as a)we don’t need to create our id targets manually and b)makes links highlighting easier and more precise.

In the post/page builder, click on the element you want to add a target id.
On the left panel, click on “Advanced” tab and enter the id value you want (e.g. some-id) in the “CSS ID” field.

Now, any link you create with URL #some-id (or any id value you entered in the CSS ID field previously) will scroll smoothly to that target. You can create standard/plain links in the post editor, custom links in your menu, links via “Page scroll to id” shortcode etc. All kind of links will work as long as they point to an existing target id in your page(s).

Alternatively, you can use Elementor’s “Anchor” block/element to create id targets. Click the anchor element (Menu Anchor) and insert the id value you want in the “The ID of Menu Anchor” field.

In addition to the methods above, you can always use plugin’s shortcodes directly in builder’s text element(s) or by using Elementor’s “Shortcode” block/element.

Keep in mind that you can use “Page scroll to id” shortcodes to create targets and links.



Post a comment
  1. Vitaly
    Posted on November 6, 2021 at 07:43 Permalink


    Im using plugin with Elementor. Page scrolling are working properly on mobile but not working on desktop. Could you tell me why it can be?

    Thank you,

    • malihu
      Posted on November 6, 2021 at 14:54 Permalink


      Unfortunately the plugin cannot work with your theme layout. Your theme does not scroll the actual page (root element). It has a custom container to switch between the sections with an inner scrollbar (it has its own scrolling function).

      “Page scroll to id” works strictly with the standard page scrollbar (the scrollbar on the html/body element of the page).

      Related FAQ:

  2. Acetabulum
    Posted on May 24, 2021 at 16:56 Permalink

    I have downloaded the page scroll to id plugin. On elementor I have added the pagescroll to id widget to the relevant sections I want to scroll to. But I am not sure how to highlight the relevant section in the menu. Is there a tutorial for this (specifically for elementor)

  3. shreeraj shah
    Posted on October 26, 2020 at 12:52 Permalink

    The method you show is the simple anchor method, I want to do like you have given a demo on your side how to do it automatically using elen=mentor

    • malihu
      Posted on October 26, 2020 at 21:31 Permalink

      I’m sorry, I don’t understand what you mean. Can you explain a bit more?

  4. Monique Oostdam
    Posted on October 21, 2020 at 15:59 Permalink

    Hi Malihu,
    I just installed your plug-in because it seems that your plug-in can solve my problem.

    When people click on this link
    they arrive in the middle of the section, instead of at the beginning of the section.

    But when people are at that page and use the link in my ‘fast menu’ it works well, they come at the beginning of the section.

    I have tried to find solutions at the internet, but if I see your 5 star ratings with many people, I believe you will have the solution.

    By the way I am working with Elementor and all my plugins are up to date.

    Thank you,
    Monique Oostdam

    • malihu
      Posted on October 21, 2020 at 16:33 Permalink


      I think you need to do the following:

      Go to plugin settings and

      1.In “delay for scrolling to target on page load” field, add the value:


      2.In the “Offset” option field, add the selector of your sticky top menu:


      Save changes, test your page and let me know

      • Ubiratã
        Posted on July 13, 2021 at 17:47 Permalink

        Isto me ajudou, obrigado! =)

  5. Dragos
    Posted on July 20, 2020 at 12:17 Permalink

    I have a bunch of anchor links on the health screening page of my site. They work just fine on desktop but don’t work on mobile. I’ve checked the advanced option ‘Prevent other scripts from handling plugin’s links (if possible)’.

    Any help appreciated.

    • malihu
      Posted on July 20, 2020 at 16:55 Permalink

      I just checked your health screening page on mobile and your links (in health screening
      packages section) seem to work as expected. Did you fix the issue or?

  6. max
    Posted on May 20, 2020 at 10:29 Permalink

    Hi malihu,
    I have some issues when scrolling the page on Android Chromiun;
    the Web page flicks while scrolling using the scroll to id.

    the site is in WordPress+ elementor
    – I checked the advanced option ‘Prevent other scripts from handling plugin’s links (if possible)’
    – the selector is set to ‘a[href*=’#’]:not([href=’#’])’
    – added your function ‘Page scroll to id” with mousewheel and keyboard custom script’ in the function.php
    – added your on.load function at the end of footer.php.

    there are somethings wrong that can I fix

    thanks a lot

    • malihu
      Posted on May 20, 2020 at 23:24 Permalink


      Maybe you need to disable the mousewheel script on mobile/touch devices(?)


      • max
        Posted on May 21, 2020 at 12:59 Permalink

        I know, there are the option do disable script for mobile, but the issue comes only on android device, on iphone, ipad it’s works perfectly …

        if you an idea …

        – max

        • malihu
          Posted on May 21, 2020 at 22:11 Permalink

          I can’t really say… it could come from a number of things like the page layout or some specific css rule(?)

          If you thing that it affects negatively the way android mobile users browse your site, I’d suggest to disable the mousewheel script on mobile/touch.

          • max
            Posted on May 22, 2020 at 12:46 Permalink

            thank Malihu, i will do

    • Sinan
      Posted on November 18, 2020 at 14:28 Permalink

      I also have the same setup. WordPress+Elementor. I also followed the steps. But stuck on 3rd step.

      where is the “function” -> “page scroll to id” to put into the function.php ?

      I want a single mouse wheel movement to scroll down to the next section. So I want a single mouse scroll to scroll to the next section. Not with a link. How can I achieve that?

  7. Monu
    Posted on March 18, 2020 at 15:26 Permalink

    after placing the custom link inside menus it is getting activated, how can i show menus active on hover or on click.

    • malihu
      Posted on March 18, 2020 at 17:09 Permalink

      I can’t see “page scroll to id” plugin being activated on your site. This page is for using the plugin with Elementor.

  8. Jorge
    Posted on January 15, 2020 at 23:37 Permalink

    Hi Malihu,
    I have installed your plugin and try some setings. I have some questions and hope you can help me out.

    I have a homepage with some menu items that I’m testing and that it scroll to the same page.
    The contact page is a new page.

    My question. When I use the code ” my site/#id ” on a button, It always restart the page from above and then scroll down to the section with the #id. If I remove my website url and just use #id then it scroll down. The only problem is that when I go to a new page like the contact page, then the button does not work.

    Is their an option so it will not load the page?

    Thanks in advance

    • malihu
      Posted on January 16, 2020 at 08:55 Permalink


      The page reloads because your server redirects all requests to the www subdomain, while your links URL do not.

      So, the solution is very simple: Just change you links URL so that they include the www part.
      For example, change your “Hoogsensitief” link URL from:


      That’s it 😉
      Let me know if you need more help

      • Jorge
        Posted on January 16, 2020 at 13:18 Permalink

        Hi Malihu,

        It works!!!!!! Thank you very much for your help and fast reply.

        The plugin works great now.

        Again many thanks.

        • malihu
          Posted on January 18, 2020 at 04:05 Permalink

          You’re welcome 🙂

  9. Richard Rodkin
    Posted on August 30, 2019 at 06:30 Permalink

    I have PS2ID working fine in a standard top navigation menu, with items highlighting onclick as well as when the page is scrolled.

    When I add an element to the page that I also want to scroll to a certain section, and give and the target the proper ID, it works fine, but for some reason, when I scroll to the last section on the page, the last menu item does not highlight as it should. When I remove this new element, the last nav item highlights as expected.

    Any idea why this might be happening?

    • [email protected]
      Posted on September 6, 2019 at 23:34 Permalink

      In case anyone stumbles on this and wants to know how this is resolved — and since no other response was given — it turned out to be an issue with the settings, where the option to “allow only one highlighted element at a time” was checked/selected. Unchecking the option resulted in the expected behavior.

  10. Juanjo Rodriguez
    Posted on August 29, 2019 at 15:16 Permalink


    I just discovered your plugin. Looks great!

    My issue is regarding save changes in settings tab.

    I installed the plugin and works ok. But when I try to change something in settings (scroll duration / offset / prevent scripts…) The Save Change button go to a Not Found Page and statrs appearing a page with a captcha i must complete (captcha doesn’t works and I need to go back). My dashboard goes crazy! I tried to reinstall, but always the same problem.

    I am working my web in a provisional temporary directory, until i be able to publish it.
    Thanks in advance!

  11. jays
    Posted on July 23, 2019 at 19:07 Permalink

    hello, i want to disable the bounce back effect on my onepage i am using elementor. when i click on navigation i tem lets say about us. it is scrolling down and bounce up

    • jays
      Posted on July 23, 2019 at 19:08 Permalink

      i want to disable the bounce up effect?

    • malihu
      Posted on July 24, 2019 at 13:33 Permalink

      There’s no bounce effect in “Page scroll to id”. The effect you see probably comes from your theme or the Elementor builder.

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

  12. guido
    Posted on June 30, 2019 at 12:15 Permalink

    Hello, i m using elementor and i create two ections for desktop and mobile . when i add anchor menu form elementor in teh desktop it works, but for mobile iam stuck nothing worked. And nobiody is talking about mobile , how can i solve it? thanks

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


      The plugin does not seem to be activated in your site. Also, your theme seems to use its own functions for scrolling the page.

  13. JC
    Posted on June 25, 2019 at 20:38 Permalink

    Hi, I’m using your plugin for a bilingual site, the URL is changing when I click on my button with the anchor but only in one language (French), but in the english version, the URL stays the same, any idea why?

    • malihu
      Posted on June 25, 2019 at 20:52 Permalink

      Each site language has its own URL. I don’t know how your site is setup but for example: is the main language and might be another language (e.g. English).

      When you create the buttons for each language, you need to give them a different URL, e.g.: or /#some-id for the main language and or /en/#some-id for the other language.

      I’m not sure what you mean by “in the English version, the URL stays the same” but if I could see your page I’d be able to tell what happens and help.

  14. naimisha manikonda
    Posted on June 1, 2019 at 23:01 Permalink

    Hello ,
    I have noticed an issue with page scrolling, it doesnt work with items for one of the menu options and its submenu when click from a different page.

    • malihu
      Posted on June 1, 2019 at 23:08 Permalink


      Please post your site url so I can check what happens and help. Also make sure your links url has the full address and not just the hash (#id), otherwise scrolling from/to different pages won’t work.

  15. Duc
    Posted on May 28, 2019 at 19:48 Permalink


    I am using your plugin and so far it’s really great with the highlighting option.
    But somehow it is always scrolling too far, it scrolls way over the element with the anchor ID.
    I can try to balance it with an offset, but it wouldn’t be precise enough for the other anchors.

    On mobile I have the same problem.

    I hope it’s alright to post my question here, otherwise can you tell me where to post my problems?

    Thank you

    • malihu
      Posted on May 29, 2019 at 03:38 Permalink


      It’s alright to post questions here 🙂

      When I click your top links, the page does not scroll beyond the targets. It seems to scroll where it supposed to scroll (according to your 120 pixels offset).

      Can you give me an example? Which link to click, where it should go, where it currently goes etc.

      • Duc
        Posted on May 29, 2019 at 11:27 Permalink

        Thank you for the answer, you are right!

        it always jumps to the top corner of the target.

        If you click on “Veranstaltungen” or “Anfahrt”, the bottom border of the Header always aligns with the top section border. That’s the optimal behaviour

        When I click on the above mentioned links the scrolling stops too early.
        There is a white space between the bottom menu border and the section border

        There the animation always stops too high. Is there a customization for mobile?

        Currently the clicked link will be highlighted by getting bold.
        When you start from the page “Geschichte” and click on any of the other links, the animation will start scrolling but the link will not appear as bold.
        I tried ‘highligted’ and ‘target’ as highlighting options and
        ‘Allow only one highlighted element at a time’, but it doesn’t work as intended. Either there will be no elements highlighted or 2 at a time.

        Thank you for your time 🙂

        • malihu
          Posted on May 29, 2019 at 14:48 Permalink

          OK, first try settings your offset to match your sticky header selector (instead of a fixed pixels value). Go to plugin settings and set the “Offset” value to:


          Save changes.

          Second, you have duplicate id targets in your content.

          For example, you have the target #veranstaltungen as the last element inside the “SOMMERLOUNGE IM STILVOLLEN AMBIENTE” section and as another element, just before the “VERANSTALTUNGEN” section.

          You need to remove one of them (I’d guess you want to keep the second one, above the “VERANSTALTUNGEN”).

          The same happens with kontakt and anfahrt targets.

          For links highlighting, you need to remove the CSS rule:

          .elementor-nav-menu a.mPS2id-clicked { font-weight: bold; }

          and use plugin’s .mPS2id-highlight class instead:

          .elementor-nav-menu a.mPS2id-highlight{ font-weight: bold; }

          • Duc
            Posted on May 29, 2019 at 16:51 Permalink

            I think the duplicate targets were causing most of the trouble, that’s embarassing 😀

            I set the offset to header.elementor-sticky and it now works fine. Just a tiiiiny bit too low.
            I tried to add and subtract from the given class as in ‘header.elementor-sticky + 40’ to play around but it’s not working. Is there any way to manipulate the offset further?

            I used the CSS rule:
            <span class="token selector">.elementor-nav-menu a.mPS2id-highlight</span><span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span>

            before, but if you click on “Anfahrt” for example both “Anfahrt” and “Kontakt” will be bold. I tried to activate the setting ‘Allow only one highlighted element at a time’, but it’s not working.

            Another example if I come from “Geschichte” and click on “Veranstaltungen”, both “Veranstatungen” and “Anfahrt” will be bold

            Thank you alot for your help so far.

        • malihu
          Posted on May 31, 2019 at 01:52 Permalink

          The only way to manipulate the offset further, is to use plugin’s “Auto-generate #ps2id-dummy-offset element” option (see info in plugin homepage).

          “Allow only one highlighted element at a time” option works for me when I test your page (i.e. no 2 links get highlighted at the same time). Did you fixed it or?

          • Duc
            Posted on June 2, 2019 at 22:06 Permalink

            I fixed the problem with different offsets by adding menu anchors in Elementor and giving them individual absolute positions 😀
            Now it stops on desktop and phone, just where I want it to stop.

            The “Allow only one highlighted element at a time” still doesn’t work for me. I deactivated and updated the plugin, but still no success.

            You can recreate this behaviour, by scrolling to the bottom of the page and then click on “Sommerwirtschaft”.
            After it scrolls up, both “Veranstaltungen” and “Sommerwirtschaft” will be highlighted in the menu bar.

        • malihu
          Posted on June 3, 2019 at 01:38 Permalink

          I did the test you said and I still get only one element highlighted (only “Sommerwirtschaft”). Also, at the moment, you don’t have “Allow only one highlighted element at a time” option enabled.

          • Duc
            Posted on June 3, 2019 at 19:25 Permalink

            Yes, I turned the option off for testing. Sorry about that.

            If I click “Sommerwirtschaft” and the scrolling stops at the top, the highlight for “Veranstaltungen” goes away for a brief moment but get then gets highlighted right away.

            My desktop height is over 1000px and I can see a little of the bottom anchor.
            When I change the height in inspector mode to 980px, it behaves as intended. Is this the reason?
            Can you please tell my what your resolution is?

            Thank you alot for your time!

        • malihu
          Posted on June 3, 2019 at 21:35 Permalink

          For me it’s the exact opposite:

          When I click “Sommerwirtschaft”, only “Sommerwirtschaft” stays bold. “Veranstaltungen” becomes normal (not bold) after a brief moment.

          I have tested your page ( in vertical resolutions as low as 480px and as high as 1500px.
          I’ve also tested the page with Chrome, Edge, Firefox, Opera and Vivaldi and I get the exact same behavior.

          • Duc
            Posted on June 12, 2019 at 11:17 Permalink

            I think I know what caused the problem 🙂

            when I am logged out the menu entries will be highlighted correctly.

            Now the menu jumps to the right places.
            But when I come from the page “Geschichte” and click on any other menu entry, the scrolling stops a little too high and not right on the line.
            Is there something that can be done about it?

        • malihu
          Posted on June 12, 2019 at 12:43 Permalink

          For me the scrolling stops right on the line (when coming from Geschichte page).

          Have you tested it when you’re not logged in? Maybe the issue is the top admin bar when you’re logged in (the admin bar is about 20 pixels high so scrolling might be 20 pixels off the line of the section).

          • Duc
            Posted on June 12, 2019 at 12:57 Permalink

            Yeah I tested it when I was logged out.

            Sorry I forgot to tell you that I was testing it on Safari and Firefox. Both logged out and also incognito mode.

            On Chrome it works as intended.

            But I found out another detail.
            When I delete the cache in Firefox or Safari and try to come from ‘Geschichte’, it stops on the line again.
            Is caching causing the problem on those browsers?

        • malihu
          Posted on June 14, 2019 at 01:41 Permalink

          I see. I think this issue is mainly because of browser engine in combination with the cached page content.

          Firefox and Safari try to jump to the section too fast, especially because the page is cached (I think that’s why it works when you delete the cache).

          Try this:

          Go to plugin settings and add a delay for scrolling to target on page load of:


          Save changes and test.

          The above will add a delay of 300 milliseconds before scrolling the page to the target when the page loads. This might solve the issue with Firefox and Safari and the page will scroll as in Chrome.

          • Duc
            Posted on June 17, 2019 at 15:57 Permalink

            The delay setting fixed the problem for me.

            Thank you very much!

  16. Toni
    Posted on April 4, 2019 at 16:26 Permalink

    Hello, thank you for this article.
    Is there a way to the same functionality but only using mouse wheel scroll. So instead of clicking on a link that scrolls to ID, I would like when mouse wheel is used, to scroll to the next section/previous (if I have 10 on the page)
    Something like this:

    Thank you


Post a comment

Cancel reply

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>