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:

a[href*='#']:not([href='#'])

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.

 


25 Comments

Post a comment
  1. 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

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

      Hi,

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

      Reply
  2. 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?

    Reply
    • 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:

      http://mysite.com is the main language and
      http://mysite.com/en/ 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.:

      http://mysite.com/#some-id or /#some-id for the main language and
      http://mysite.com/en/#some-id 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.

      Reply
  3. 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.

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

      Hi,

      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.

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

    Hi,

    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

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

      Hi,

      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.

      Reply
      • 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.

        Chrome:
        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

        Safari:
        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

        Mobile/Tablet:
        There the animation always stops too high. Is there a customization for mobile?

        Other:
        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 🙂

        Reply
        • 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:

          header.elementor-sticky

          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; }

          Reply
          • 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?

          Reply
          • 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.

          Reply
          • 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 (http://elbschloss-uebigau.de/wp/) 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.

          Reply
          • 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).

          Reply
          • 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:

          300

          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.

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

            The delay setting fixed the problem for me.

            Thank you very much!

  5. 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: https://premiumaddons.com/vertical-scroll-widget-for-elementor-page-builder/

    Thank you

    Reply

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>

css.php