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

Page scroll to id for WordPress tutorial

Basic tutorial for using “Page scroll to id” WordPress plugin on your WordPress site.

In order to use the plugin on your WordPress site (after installing and activating it), you need to do the following:

  1. Create id targets the page will scroll to or find existing id attributes in your theme to use with your links.
  2. Create links that point to those targets or enable the plugin on links that already exist in your site.

Divi WordPress Theme

Creating id targets

Creating id targets in post block editor (Gutenberg)

You can create your targets in more than one ways in the block editor, e.g. using the group block, the “Page scroll to id target” block, the shortcode block, block class attribute, HTML anchor field etc.

Create id targets using the group block

Click on the “Add block” icon and select “Group”. This will insert a general container block that can group other blocks and we can add the id on this group/general container block.

On the group block properties (right panel) you can add the id you want in the “HTML Anchor” field.

Create id targets using the “HTML Anchor” field

If you use headings in your content, you can use the “HTML Anchor” attribute of blocks to set a target id. Select your block, click “Advanced” in the right panel and insert the target id you want in the “HTML Anchor” field.

Create id targets using plugin’s “Page scroll to id target” block

The plugin has its own custom block for inserting targets: “Page scroll to id target”

Create id targets using “Additional CSS Class(es)” field

You can generate id targets for any block element, by setting its class name to: ps2id-id-yourid, changing the yourid part to the id value you want.

Click on a block element (e.g. a paragraph), click “Advanced” in the right panel and set the target id you want in the “Additional CSS Class” in the form of:
ps2id-id- plus the id you want.
For example, if you want to create the target id “last-section”, give the element the CSS class:
ps2id-id-last-section.

Create id targets using the shortcode block

You can use plugin’s shortcodes in the block editor. Click on the “Add block” icon and select “Shortcode”.
Add the [ps2id id='section-1'/] in the shortcode field to create a target with id section-1.

You can also use the [ps2id_wrap] shortcode accordingly.

Creating id targets in post visual editor (classic “old” editor)

tinymce-custom-btn-ps2id-target In post visual editor, click the toolbar button “Insert Page scroll to id target” to create a target at the cursor position in the editor.

page-scroll-to-id-target-modal In “Page scroll to id target” modal insert the id value you want (e.g. some-id) and click “OK”. The target shortcode (e.g. [ps2id id='some-id' target=''/]) will appear in the editor. Update/save the post/page. You can now use this id value in your link(s) URL (e.g. #some-id).

Creating id targets in post editor via shortcodes

In post visual or text editor, enter [ps2id id='some-id'/] in the place you want to create the target and set the id attribute to the value you want. This will create a simple anchor-point target. If you want to wrap your content (or part of your content) in a target id (same as adding an id attribute to some content), use the [ps2id_wrap] shortcode:

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

Update/save the post/page so you can use this target value in your link(s) URL (e.g. #some-id).

Click here for more info on target shortcodes

Creating id targets in HTML

Wrap your content in a div with an id attribute (recommended for better link highlighting) or add simple anchor points (with id attributes) before each content section. Examples:

<div id="section-1">
  <p>Section 1 content...</p>
</div>

<div id="section-2">
  <p>Section 2 content...</p>
</div>

<div id="section-3">
  <p>Section 3 content...</p>
</div>
<a id="section-1"></a>
<p>Section 1 content...</p>

<a id="section-2"></a>
<p>Section 2 content...</p>

<a id="section-3"></a>
<p>Section 3 content...</p>

Creating id targets in WordPress widget areas

Create targets in your widget areas (Appearance → Widgets) via plugin’s “Page scroll to id target” widget.
Keep in mind that all WordPress widgets have existing id values that you can use with your links. You can find these id values within each active widget under “Page scroll to id target” label. The option to display these values is “Display widgets id attribute” which is enabled by default.

FAQ

Creating links

page-scroll-to-id-target-menu The plugin is enabled by default on WordPress Menu links (Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to.

Edit your menu and add “Custom links” as these type of links allow us to enter a custom URL with the id we want. Your links URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc.

Please note that if you want your links to work from other/different pages, you’ll need to insert the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id) or the relative-root URL (e.g. /page/#some-id).

You can use plugin’s shortcodes in the block editor. Add the shortcode: [ps2id url='#some-id']link text[/ps2id] inside any block element to create a link that points to the “some-id” target.

Keep in mind that since “Page scroll to id” version 1.6.3, the plugin is enabled by default on all links with a non-empty hash value (e.g. #some-id) in their URL. This means that you don’t have to use plugin’s shortcode to create links, as any link you create via the WordPress editor will work.

tinymce-custom-btn-ps2id-link In post visual editor, click the toolbar button “Insert/edit Page scroll to id link” to create a link at the cursor position in the editor or from text you’ve already selected.

page-scroll-to-id-link-modal In “Page scroll to id link” modal insert the link’s URL and text. The URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc. When ready, click “OK” and the link will appear in the editor. You can edit the link via both “Insert/edit link” and “Insert/edit Page scroll to id link” buttons, as well as inline.

“Page scroll to id link” modal provides additional options like “Offset” and “Custom class(es)” that can be used to change link’s offset, its scroll duration/speed etc.

In post visual or text editor, enter [ps2id url='#some-id']link text[/ps2id] in the place you want to create the link and set the url attribute and link’s text to the values you want. The shortcode provides the same options as plugin’s “Insert/edit Page scroll to id link” toolbar button via attributes.

Any link with ps2id class or m_PageScroll2id rel attribute value will be handled by the plugin. For example:

<a href="#some-id" class="ps2id">link text</a>
<a href="#another-id" rel="m_PageScroll2id">link text</a>

You can instruct “Page scroll to id” to handle any link in your page(s) by using the “Selector(s)” field in plugin settings.
If you need to enable “Page scroll to id” on all links with URL containing a hash (#), insert the following value in “Selector(s)” field:
a[href*=#]:not([href=#])

Click here for more info on “Selector(s)”

FAQ

Links highlighting

Each time a target element is visible on the screen (i.e. is within the viewport), the plugin adds the mPS2id-highlight class to its associated link or links (i.e. the links that scroll to this target). You can use this class in your theme’s stylesheet or custom CSS to style the current/active link(s), e.g.
a.mPS2id-highlight{ background: #ff0; }

Common case scenario and example

Lets say you have a sticky menu containing links that scroll to various targets/sections within the page. Your links text color is black (which may be set by your theme or some other stylesheet):

.memu-item a{ 
    color: black; 
}

When scrolling through page sections (i.e. targets) you want the link of the visible/current target to become red. You can do this by adding the following CSS:

.memu-item a.mPS2id-highlight{ 
    color: red; 
}

Notes and more info

The default highlight classes for the links are: mPS2id-highlight, mPS2id-highlight-first and mPS2id-highlight-last (you can change these class-names in plugin’s settings if you want).

For more information about the highlight classes and options see “Classes & highlight options”, “Highlight selector(s)” and FAQ below.

FAQ

Offset scrolling for sticky menus

If your page has a top sticky/fixed-positioned menu, you’ll probably need to use plugin’s “Offset” option in order to prevent the menu from overlapping your content. This option allows us to shift (i.e. offset) scrolling, so in the case of a top sticky menu, we usually need to “stop” scrolling a few pixels before the target reaches the top of the page (to accommodate for the space the sticky menu occupies).

Go to Settings → Page scroll to id → Offset and insert an offset amount equal to your sticky menu height (in pixels). You can insert its height value as a number (e.g. 100) or you can insert your menu selector (e.g. #my-sticky-menu), so the plugin calculates its height automatically.

The plugin provides special selector expressions in order to define advanced offsets and work with responsive menus. For more info see “Offset” option.

Scrolling from/to different pages

The plugin has the option to scroll from/to different pages enabled by default. This means that when you click a link which points to a target id on another page, you’ll still get the smooth scrolling effect which will happen immediately after that page is fully loaded.

The only thing you’ll need is to make sure your links have the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id).

Video tutorial


841 Comments

Post a comment

Comments pages: 1 7 8 9 10

  1. jbeacher
    Posted on May 2, 2024 at 05:54 Permalink

    First off, thank you very much for creating and offering this plugin. I spent all day trying to solve this problem to no avail. However, I’m having an issue now that when the links are taking you to the exact slide that being link, it just scrolls you down to the general area, in this case a gallery. Any idea how to fix this?

    Thanks in advance for your time.

    Reply
    • malihu
      Posted on May 2, 2024 at 14:17 Permalink

      Hello,

      The plugin cannot change your carousel’s slide by itself because it is a different script. In other words, it will scroll vertically to the position but it cannot change the horizontal slider.

      This said, it seems that the carousel script changes the slides according to URL’s hash value so try this:

      Go to “Page scroll to id” settings and enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes, test and let me know.

      Reply
      • jbeacher
        Posted on May 2, 2024 at 17:21 Permalink

        Thanks for the reply malihu. Unfortunately, it didn’t work but I appreciate the suggestion. I get that the plugin just doesn’t function that way.

        Neverthless, thanks again for a super helpful plugin.

        Reply
        • malihu
          Posted on May 3, 2024 at 15:16 Permalink

          It seems to be working for me. For example, when I click VIEW EXAMPLES of “3D Tours/Floor Plans” it shows the “3D Tours & Floor Plans Gallery”, when I click VIEW EXAMPLES of “Cinematic Video” it shows the “Real Estate Video Gallery” etc. Is this what you see?

          Reply
          • jbeacher
            Posted on May 3, 2024 at 19:23 Permalink

            You’re right it’s working for the vertical scroll but I was hoping to get it to scroll to the specific slide in the carousel. But I understand the plugin wasn’t designed for that.

        • malihu
          Posted on May 3, 2024 at 21:22 Permalink

          It seems to be working for me for the slide also. Can you explain a bit in more detail which link to click and which slide should appear?

          Reply
  2. ian
    Posted on April 11, 2024 at 23:19 Permalink

    I need the plugin to scroll on any page where my div id is added, even if that page doesn’t have #divid at the end of the URL.

    Help?

    Reply
  3. Mano
    Posted on January 19, 2024 at 11:54 Permalink

    How can i use this in my custom template?

    Reply
    • malihu
      Posted on January 21, 2024 at 02:49 Permalink

      The way it is described above, i.e. you create the targets and links the same way as any theme/template. If you need specific help please post your page/site URL and let me know.

      Reply
  4. Julius Njeru
    Posted on November 16, 2023 at 18:46 Permalink

    I need to know how to set your navigation to left, sticky and running from top to bottom please

    Reply
    • malihu
      Posted on November 17, 2023 at 16:17 Permalink

      This guide/tutorial is about the Page scroll to id plugin. Not sure which navigation you’re referring to?

      Reply
  5. filip
    Posted on September 19, 2023 at 17:12 Permalink

    Hello, please I have problem with smooth scrolling after added plugin google site kit for google analytics. Page refresh after every click on menu item, and after that scroll to id. Do you know any solution please? Before added google site kit everything worked normally.

    Reply
    • malihu
      Posted on September 19, 2023 at 17:39 Permalink

      Hello,

      Did you fix it?

      Make sure your links url match exactly the url you see in browsers address bar, e.g. make sure you use https etc.

      Does this help?

      Reply
  6. Filip
    Posted on July 4, 2023 at 11:24 Permalink

    Hello, please I am trying to do the same thing, like in video in 9:05min, but i can not see anything like this on my website. Could you help me please? Thank you a lot. Filip

    Reply
    • Filip
      Posted on July 4, 2023 at 11:25 Permalink
    • malihu
      Posted on July 4, 2023 at 13:31 Permalink

      Hi,

      What is that you cannot see in your site? Do you want to highlight the links?

      If yes, you need to first disable the “Allow only one highlighted element at a time” option you enabled. Then, you need to add some CSS rules.

      Reply
      • Filip
        Posted on July 4, 2023 at 18:21 Permalink

        I wanted to highlight the menu item after scroll to section on page

        I added this css:

        .nav-menu-primary .menu-item > a.mPS2id-hihlight {
        color: red;
        }

        the problem is no menu item is highlighted after scrolling through the sections

        Reply
        • Filip
          Posted on July 4, 2023 at 19:42 Permalink

          Only problem left, i could not to automatically highlight current menu while scrolling …

          Reply
        • Filip
          Posted on July 4, 2023 at 20:24 Permalink

          Only problem left is automatic highlighting of individual menu items during scrolling does not work.

          highlighting menu items after click works successfully

          Reply
          • malihu
            Posted on July 6, 2023 at 15:56 Permalink

            You’re welcome 🙂 Glad I helped.

        • malihu
          Posted on July 4, 2023 at 20:31 Permalink

          OK. Go to plugin settings and set the “Highlight selector(s)” option value to:

          .nav-menu-primary .menu-item a

          This will fix the no menu items get highlighted, because the highlight selector value you set (active-menu-item) is not corresponding to any elements.

          Also, change your CSS to:

          .nav-menu-primary .nav-ul li.nv-active > .wrap > a.mPS2id-hihlight { color: red; }

          as there’s a .wrap element between the li and a.

          Let me know if everything works

          Reply
          • Filip
            Posted on July 5, 2023 at 21:31 Permalink

            Hi Malihu,

            It works great. Thank you very very much for your help, great plugin and extremely fast and reliable support.

            Thank You. Filip

  7. Rob
    Posted on May 30, 2023 at 18:29 Permalink

    Hi Malihu

    thanks for the cool plugin

    Just can’t seem to get the highlighted text to turn to black when the targeted section comes into view.

    This is the css code I have in place

    /*———-Page Scroll to ID———-*/

    .current-menu-item a.mPS2id-highlight{
    color: black;
    border-top: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    padding-top: 15px;
    }
    .memu-item a.mPS2id-highlight{
    color: black;
    }
    for this page ..

    https://architect4.grumpyguydevelopment.co.uk/process/

    I’m techniclly challenged 🙂 BTW

    Thanks Rob

    Reply
    • malihu
      Posted on May 30, 2023 at 19:06 Permalink

      Hello Rob,

      You just need to set a more specific selector and use !important to overwrite the theme’s CSS (which also uses it):

      .et_pb_menu_0.et_pb_menu ul li.current-menu-item a.mPS2id-highlight{ color: black !important; border-top: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; padding-top: 15px; }

      Let me know if it works

      Reply
  8. Bartek
    Posted on May 5, 2023 at 16:20 Permalink

    After a lot of hard work, I finally managed to relatively configure the plugin. I only care about one thing, so that on the main page the menu will highlight items after clicking and moving around the screen. I have four items to go . Red highlighting works, but I have no idea how to make it show a red bar above the active item.

    When you enter the site, you can see what it’s all about. Just move the cursor over the items in the menu – a red dash appears. Unfortunately, after clicking on the position, I cannot achieve this effect.

    The only thing I added to custom CSS:

    a.mPS2id-highlight { color: #E52722 !important; }

    Please help. What do I need to do to trigger this effect. Underline above. Unfortunately, I don’t know enough CSS.

    Best regards, thanks for great plugin

    Bartek

    Reply
    • malihu
      Posted on May 5, 2023 at 21:35 Permalink

      No problem 🙂

      Add the following to your CSS:

      .decoration-downwards .dt-nav-menu-horizontal>li>a.mPS2id-highlight:after, .decoration-upwards .dt-nav-menu-horizontal>li>a.mPS2id-highlight:after { opacity: 1; transform: translateY(0px); } .elementor-6236 .elementor-element.elementor-element-0880d33 .dt-nav-menu-horizontal > li:not(.act) > a.mPS2id-highlight:after { background: #E52722; }

      Let me know

      Reply
      • Bartek
        Posted on May 8, 2023 at 10:10 Permalink

        Dear malihu, it’s working GREAT!
        THANK YOU very much 🙂

        I have a last issue. When plugin is active, in admin panel the following error is displayed:

        Array to string conversion in /usr/home/www/hkkgroup.pl/wp-includes/pluggable.php on line 2292

        Do you know what could be wrong?

        Best regards!

        Reply
        • malihu
          Posted on May 8, 2023 at 15:17 Permalink

          You’re welcome 🙂

          The PHP notice (not error) you see is a known issue which will be fixed in plugin’s next version (1.7.8). This said, the fix is already implement in plugin’s development version here:

          https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

          If you don’t want to wait for the next version release, you can use the development version above (download and replace the current plugin version you have installed). When version 1.7.8 is released you can update from the development version as you normally do.

          Reply
          • Bartek
            Posted on May 9, 2023 at 12:41 Permalink

            Thank You very much! Best Regards!

  9. john
    Posted on December 26, 2022 at 18:14 Permalink

    Holy shit this is confusing. It would be simpler to just learn how to do it with jQuery. Seriously, this ten page tutorial full of shortcodes, Gutenberg crap, etc, can’t be more confusing than the 3 lines it would take with jQuery on SO…

    Reply
    • john
      Posted on December 26, 2022 at 18:15 Permalink

      meant to say can’t be less confusing.

      I feel dizzy from reading this.

      Reply
  10. Hans
    Posted on December 22, 2022 at 12:47 Permalink

    Hi mr. Malihu,

    I have a situation I can’t solve, but my instinct says your plugin probably can (I’m using the free version).
    The problem is: i have a page with an iFrame. In the iFrame is a “#link” that is supposed to scroll the parent page to the named anchor. That anchor is made with Elementor; its id=”contact”, it’s class is: “elementor-menu-anchor _mPS2id-t mPS2id-target” (made by Elementor). I have tried to make the link in the iFrame like so:

    <a href="#contact" target="_parent">contactlink</a>

    But that doesn’t work. Can you help out, and explain to me what I am doing wrong? And how to properly do that so it scrolls the parent to the target instead of the iFrame, or loading the page in the parent instead of scrolling?

    Thanks a lot for your time and feedback, and have a great day!
    Hans.

    Reply
    • Hans
      Posted on December 22, 2022 at 12:58 Permalink

      Update: if I use the full url, the page does go to the anchor but it jumps, it doesn’t scroll. Used link:

      <a class="contactlink ps2id" href="https://www.mindfulness-op-maat.nl/wp/deelnemers-test-pagina/#contact" target="_parent">contactformulier</a>

      So I guess the question is: is it possible to have the page scroll instead of jump to the anchor in the parent page?

      Thanks again, and have a great day!
      Hans

      Reply
  11. Rodrigo
    Posted on June 7, 2022 at 22:39 Permalink

    Your plugin is very good! Let me ask you for a little help?!..
    I need to scrol and highlight some text BASED on url and ALREADY existe text like: https://mypage.com/post/#sometext , without create a anchor. So if there is that ‘sometext’ on that page, every exist point will be highlighted.

    Reply
    • malihu
      Posted on June 7, 2022 at 23:05 Permalink

      Hi,

      Every already existing anchor with URL in the form you posted, will be highlighted by the plugin. The link will get the class mPS2id-highlight while scrolling the page. You can use this class in your CSS to style the highlighted element.

      You can highlight targets too using the mPS2id-target class. This works as long as there’s a #sometext link in the page. This said, you can laways create a hidden anchor (i.e. create a link and hide it with CSS).

      Not sure if this is what you need(?) but if you can send me your page URL and what you want to do in more detail, I’ll be able to help.

      Reply
  12. Jim
    Posted on September 2, 2021 at 17:55 Permalink

    Love the plugin, but i was wondering if there was a way to prevent it from starting at the top every time I go to a new ID on the page. Is it a setting somewhere?

    Reply
    • malihu
      Posted on September 2, 2021 at 20:16 Permalink

      Hi,

      Page scrolling should not start from the top. What currently happens, is you need to use the correct URL for your links.

      This is because your web server uses SSL (https) and does not use the www sub-directory, i.e. it redirects all http and www requests!

      You simply need to change your links URL to use https (instead of http) and remove the www. part.

      For example, change your “About the show” link URL from:

      http://www.jimterviews.com/#about

      to:

      https://jimterviews.com/#about

      or even:

      /#about

      if you want to use the shorter root-relative URL and it’ll work as expected 😉

      Let me know

      Reply
  13. Michael
    Posted on August 4, 2021 at 01:50 Permalink

    Hi, and thank you again for helping me with my preious issue!

    New issue: I have some inconsistent behaviour in Chrome and Firefox. On Firefox, every link in the horizontal nav bar highlights in blue when hovering over the menu choices, except “Profile” (remains white). In Chrome the same thing happens except that it’s “Contact” which doesn’t highlight in blue during a hover state (remains white). Any ideas/suggestions, please?

    Also, when using the mobile menu, is there some way to insert a small padding on the left of the menu slections so that the highlighting doesn’t start right in front of the first letter?

    Thank you very much again!

    Best,
    Michael

    Reply
    • Michael
      Posted on August 4, 2021 at 01:56 Permalink

      In Chrome, when I refreshed the web page, it became “Available Works” that doesn’t highlight in blue. Then I refeshed again and it’s “Contact” not highlighting. Very peculiar.

      Looking forward to your response, please. Thank you!

      Reply
    • Michael
      Posted on August 4, 2021 at 02:31 Permalink

      I now have the steps to reproduce this issue (it’s the same in both browsers):

      Click on any of the nav bar selections (Home, Oil Paintings, Watercolours, etc.).
      Now refesh the page (usually F5). It highlights in an orange box with white font. All other pages will highlight in blue text except the one you selected, even when you scroll through the page.

      I would like to have the setting that allows for the left-padding, too, in the mobile menu, as per my original message.

      Thank you!

      Reply
    • malihu
      Posted on August 6, 2021 at 18:32 Permalink

      Hey! Not sure if you solved the issues you were having(?)

      Can you explain the problem a bit more?

      Do you need the highlight to be blue text instead of the orange box?

      Reply
      • Michael
        Posted on August 7, 2021 at 02:05 Permalink

        Thanks for responding! I managed to figure out how to add some left padding in the mobile menu, but the other issue remains. Basically, it seems the browser recalls which named anchor/page section was selected and treats it as the active link regardless of which anchor/page section you’ve scrolled to. This remains the case until you land on another anchor/page section and refresh the page.

        Try this example to see what I mean:

        On my website, click on any of the nav bar selections (Home, Oil Paintings, Watercolours, etc.). Let’s say Home. Home is now the active anchor/section and it highlights with an orange box. You can hover over any other navbar selection to yield blue text except Home, even if you scroll to another anchor/page section. The hover behaviour should be blue text, even in an orange (selected) box.
        Now scroll down to select Watercolours and refresh the page (usually F5 in most browsers). It now highlights Watercolours in an orange box with a white font. All other pages will now highlight in blue text when you hover except Watercolours, even when you scroll through the other anchors on the page.

        It seems the last anchor/page section remains the “active” link until you refresh the page. Any suggestions? Thank you.

        Reply
        • malihu
          Posted on August 7, 2021 at 17:51 Permalink

          The CSS for hover comes from the theme stylesheet. To make the links blue, you can try adding the following to your CSS:

          /* hover links blue color */ .main-nav > li.act:not(.wpml-ls-item) > a:hover, .main-nav > li.act:not(.wpml-ls-item) > a:hover .menu-text, .main-nav > li.act:not(.wpml-ls-item) > a:hover .subtitle-text, .sticky-on .main-nav > li.act:not(.wpml-ls-item) > a:hover .menu-text, #phantom .main-nav > li.act:not(.wpml-ls-item) > a:hover .menu-text, .sticky-on .main-nav > li.act:not(.wpml-ls-item) > a:hover .subtitle-text, #phantom .main-nav > li.act:not(.wpml-ls-item) > a:hover .subtitle-text { color: #1ebbf0; } /* active links blue color */ .sticky-on .main-nav > li:not(.wpml-ls-item) > a.mPS2id-highlight .menu-text, #phantom .main-nav > li:not(.wpml-ls-item) > a.mPS2id-highlight .menu-text { color: #1ebbf0; }

          Is this what you need?

          About the last section remaining active:
          The contact section should remain active if enough portion of it is visible (i.e. is within the viewport). If you’ve scrolled down to the bottom of the page and you make the browser window shorter, the active state of the contact section will be gone as not enough portion of the section is visible.
          Does that make sense?

          Reply
          • Michael
            Posted on August 7, 2021 at 19:13 Permalink

            Yiasou Manos,

            The first snippet of CSS is exactly what I needed to address my issue (the active page should have a red box with white text and only display blue text if one hovers). I greatly appreciate your help and what you wrote does indeed make sense. Thank you and I wish you a very lovely rest of the weekend!

            Cheers and evharisto!
            Michael

        • malihu
          Posted on August 7, 2021 at 23:48 Permalink

          Awesome 🙂

          Reply
  14. Michael
    Posted on July 31, 2021 at 04:53 Permalink

    Hi and thank you for an excellent plugin! I was wondering if there’s possibly a reason why the following css from your example

    a.mPS2id-highlight{ background: #ff0; }

    works on my site in Chrome, but not correctly in Firefox? Actually, it does work, but only for the first anchor (i.e. Home). The site is in progress: https://22q.962.myftpupload.com/

    Thank you for your time and your assistance — folks are keepingyou very busy here! 🙂

    Reply
    • Michael
      Posted on July 31, 2021 at 04:58 Permalink

      It doesn’t work correctly in Opera, either. Only the Home link shows a highlighted box around the navbar link. Thanks again!

      Reply
    • Manos
      Posted on July 31, 2021 at 16:37 Permalink

      Hi,

      In plugin settings, try disabling “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target” options and let me know so I can check it again.

      Reply
      • Michael
        Posted on July 31, 2021 at 22:31 Permalink

        Hi Manos,

        I appreciate your reply and suggestion. That fixed it, thank you! 🙂

        Reply
        • Manos
          Posted on August 1, 2021 at 15:47 Permalink

          Awesome 🙂
          Glad I helped!

          Reply
  15. pouletty Nicolas
    Posted on July 13, 2021 at 11:30 Permalink

    Hello

    Thanks for this great plugin.
    I’d like to exclude some links from the plugin :
    https://vetodiag.fr/caninfelin/#coombs
    https://vetodiag.fr/caninfelin/#nt-probnp
    https://vetodiag.fr/caninfelin/#fs
    -…

    I don’t know the code to insert in the field “selectors are excluded”
    Can you give the CSS form to copy and paste in the field

    Reply
    • malihu
      Posted on July 13, 2021 at 13:28 Permalink

      Hi,

      You can use the $ attribute css selector to your links selectors.
      So, at the end of the excluded selectors field, add the comma separated selector values you want:

      , a[href$='#coombs'], a[href$='#nt-probnp'], a[href$='#fs']

      You can add more and change the hash value (#some-id) to the target value of your link(s).

      Let me know if it helped 🙂

      Reply
  16. Trinidad
    Posted on July 2, 2021 at 20:39 Permalink

    Is there a tutorial for using this plug-in to create a simple “Scroll Back-to-Top Button” on every page of your site?

    Reply
    • malihu
      Posted on July 5, 2021 at 00:12 Permalink

      Hello,

      You can try adding something like the following inside your theme’s/child theme’s functions.php:

      /* Simple back to top button */ add_action('wp_footer', 'simple_back_to_top_button'); function simple_back_to_top_button(){ ?> <a href="#top" id="simple-back-to-top-btn"><span>&uarr;</span></a> <?php };

      You can then style your button however you want in appearance > customize > additional css:

      #simple-back-to-top-btn { display: block; position: fixed; bottom: 1rem; right: 1rem; color: #fff; background: #000; }

      Reply
      • [email protected]
        Posted on July 5, 2021 at 20:42 Permalink

        Hmm, that didn’t seem to do anything but I don’t have a footer, so maybe that’s it?

        Reply
        • malihu
          Posted on July 6, 2021 at 11:35 Permalink

          Can you make sure the element is added in the HTML code?
          Right-click your page, click “View source” and search the code for “#simple-back-to-top-btn”. If the code is found then the button element is added and you probably just need to add some CSS rule, for example a z-index:

          #simple-back-to-top-btn { display: block; position: fixed; bottom: 1rem; right: 1rem; color: #fff; background: #000; z-index: 9; }

          Also, your theme should normally have the wp_footer() function in its footer.php template. It’s required for the code I posted above to work. Is this the case?

          Does your theme/child-theme have a footer.php template? If yes, you can manually edit it (appearance > editor) and add the following HTML code before the closing body tag (</body>):

          <a href="#top" id="#simple-back-to-top-btn"><span>&uarr;</span></a>

          Reply
          • [email protected]
            Posted on July 6, 2021 at 19:18 Permalink

            Nope, there’s no footer in the template I’m using. Is there another way?

            I did add the above to my custom css and I see it in there, but the footer.php is missing.

        • malihu
          Posted on July 6, 2021 at 20:46 Permalink

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

          Reply
  17. Anuj
    Posted on May 31, 2021 at 06:05 Permalink

    Hello,

    On one page I want to use a ‘menu’ created using divi blurb module that sticks to the top. When the use clicks on one of the blubs the page scrolls to the relevant section. Currently all the blurbs are highlighted at once.
    Is it possible to style/highlight a single blurb at a time using this plugin?

    Help will be greatly appreciated.

    Regards

    Reply
    • malihu
      Posted on May 31, 2021 at 13:41 Permalink

      Hi,

      Yes, the plugin provides a way to highlight only a single menu item. You can see the “Links highlighting” section above and this FAQ.

      This said, I’m not sure if the highlighting you see comes from your theme or somewhere else. Did you use plugin’s .mPS2id-highlight class in your CSS? If not, then the highlight styling you see comes from your theme.

      If I could see your site/page, I’d be able to see what happens and provide more help.

      Reply
  18. Fabian Pena
    Posted on May 26, 2021 at 20:11 Permalink

    Hello, I have installed this plug and i followed the instructions with WPBakery and it doesn’t work, then I watched the tutorial video and it didn’t work either.

    What could it be?
    Thank you

    Reply
    • malihu
      Posted on May 26, 2021 at 23:49 Permalink

      Hi,

      I just checked your site and it seems to be working now. Did you fix it or?

      Reply
  19. Raybblinh
    Posted on May 10, 2021 at 16:50 Permalink

    Hi Malihu,

    I love the plugin and how it works, but there seems to be a grey overlay over the impacted links.

    I have tried various filters to improve brightness and contrast but it did not work.

    How can I remove it so that my links are a true white?

    Thank you!
    Raybblin 🙂

    Reply
    • malihu
      Posted on May 10, 2021 at 22:26 Permalink

      Hello,

      There’s an opacity rule (0.5) applied on the parent h3 tag of each link. You can do something like this:

      h3{ /* remove opacity */ opacity: 1; } h3 > span, h3 > span > a{ /* make links color white */ color: #fff !important; }

      Reply
  20. Mira
    Posted on April 7, 2021 at 10:54 Permalink

    Hi malihu,

    I am new to WordPress and installed your plugin. I have a problem with highlighting the links in my main navigation menu when scrolling. My preferred option is: hover + highlighting: color white, background black – the only button that works is the Home button

    I use this css: .menu-item a.mPS2id-highlight {color: white!important;}
    .menu-item a.mPS2id-highlight {background: black!important;}

    and it all worked fine until yesterday. I am still working on the website (it’s not meant to be published yet) and maybe I changed something by accident, but I can’t figure out what is wrong. The Advanced Option “Prevent other scripts from handling plugin’s links (if possible)” is activated. I would be really greatful if you could help me, it’s my first website and I’m a bit lost….
    Many thanks
    Mira

    Reply
    • malihu
      Posted on April 7, 2021 at 15:34 Permalink

      Hello Mira,

      I need to see the page/content in order to help. If you want to send me any passwords etc. you can contact me via email 🙂

      Reply
  21. Matthew
    Posted on March 12, 2021 at 21:21 Permalink

    Hi Manos!

    I am using plugin ‘Options for Twenty Seventeen’. If I go into Appearance, Customise, Theme Options, then check the box for ‘Back to Top Link’ then a grey strip appears along the bottom of the page! If I inspect the element it says ‘. I will email you the URL 🙂 Thank you!

    Matthew

    Reply
  22. megha
    Posted on February 10, 2021 at 09:40 Permalink

    i used this plugin in my elementor website, it scrolls to ID perfectly but i am not able to highlight my current activated section.

    Reply
    • malihu
      Posted on February 10, 2021 at 14:25 Permalink

      I need to see your site/page in order to help. Can you post your URL?

      Reply
      • Megha Patel
        Posted on February 11, 2021 at 10:41 Permalink

        Your Plugin is amazing. it is a blessing for us who doesn’t know much about javascript and CSS.

        My Site url is “www.oxypranahomes.com”

        I can Scroll to page with this plugin. But activate section is not highlighted .

        i used this css

        .elementor-nav-menu ul.mPS2id-highlight{
        color: red;
        }

        Thank you so much for your attention.
        it means alot.

        Reply
        • malihu
          Posted on February 11, 2021 at 15:25 Permalink

          In plugin settings, remove the #about value from “Highlight selector(s)” option and set it to:

          .elementor-nav-menu .menu-item a

          Also, disable “Allow only one highlighted element at a time” option.

          Click save changes.

          Change your CSS to:

          .elementor-nav-menu .menu-item.current-menu-item .elementor-item a.mPS2id-highlight{ color: red; }

          Test and let me know

          Reply
  23. muq
    Posted on December 1, 2020 at 14:01 Permalink

    Hey,

    I’ve another quick question, Can we use both vertical and horizontal scrolling at a time on the same page?

    Looking forward to your response.

    Thanks

    Reply
    • malihu
      Posted on December 1, 2020 at 22:07 Permalink

      Yes, by using the “auto” value in “Page layout” option in plugin settings.

      Reply
  24. muq
    Posted on December 1, 2020 at 12:57 Permalink

    Hey,

    Hope you are doing great!

    I would like to use your plugin to swipe the slider from left to right and up to down by finger touch on mobile.

    Like as when clicking over the section buttons, it jumps to the exact next slide but while we swipe with a finger on mobile. it doesn’t jump over the next slide.

    Could you please confirm to me if this feature is part of your plugin? I’m checking with the demo.

    http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html

    Your prompt reply would be highly appreciated.

    Thanks

    Reply
  25. Norman
    Posted on November 10, 2020 at 17:07 Permalink

    Great plugin!
    I’m using this to highlight the menu items in a sidebar, So as the user scrolls to the id the highlight shows in the sidebar.

    My sidebar has multiple levels:

    Parent

    child

    subchild

    At the moment the highlight only works on the parent. Would you be able to tell me if it’s possible to highlight the child and subchild too and if so how please?

    Thanks

    Reply
    • malihu
      Posted on November 12, 2020 at 00:14 Permalink

      If your child/subchild links point to a child/subchild section, they will get highlighted. Are your child/subchild items links that point to child/subchild targets?

      Reply
      • norman
        Posted on December 4, 2020 at 16:06 Permalink

        Yes they are, This is why i am confused with you it’s not highlighting

        Reply
        • malihu
          Posted on December 4, 2020 at 21:01 Permalink

          I’d need to see your site/page in order to help. Can you post your URL?

          Reply
          • Norman
            Posted on December 7, 2020 at 11:12 Permalink

            Hi,
            I have actually got it working now, Thank you!
            I ask if there’s a way to have 2 highlight classes? One I can assign to the child and one to the subchild?

            I ask this because I have selected ‘Allow only one highlighted element at a time’ as sometimes 3 subchildren will highlight if they’re in view, However having this ticked then means my child wont be highlighted too.

            There are times when I need the child to be highlighted as well as the subchild but I only want 1 subchild to highlight not the 3 in view.

        • malihu
          Posted on December 7, 2020 at 22:51 Permalink

          The plugin does not provide 2 highlight classes but you might be able to do it using the .mPS2id-highlight-first and .mPS2id-highlight-last classes (you’ll need to disable “Allow only one highlighted element at a time” option to see these classes applied) in combination with .mPS2id-highlight class.

          The thing is that I can’t provide any CSS rules without seeing your page/site in action.

          Let me know if you can post or maybe send me your URL.

          Reply
  26. [email protected]
    Posted on September 24, 2020 at 03:05 Permalink

    Hello,

    I’m using a sticky bar for navigational purposes and I was wondering if instead of the section being highlighted, could the letters appear in bold instead?

    Thanks!

    Reply
  27. Mariana Mugeiro
    Posted on September 23, 2020 at 18:37 Permalink

    Hello! Love the plugin, but I’m having some issues with the highlighting of the links.

    I have a one-page nav menu (WordPress menu) with anchors to different sections on one page and all of the menu items appear to be highlighted at all times when I’m on that page!

    I’ve tried enabling the “Allow only one highlighted element at a time “and the “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)” options but it doesn’t seem to work. All my “Home” menu items are highlighted when I’m at the home page, all my “Results” items are highlighted when I’m in the results page.

    Can you please help me? Thanks!

    Reply
    • malihu
      Posted on September 24, 2020 at 04:01 Permalink

      Hello,

      The highlight you see is done by your theme (not the plugin). It’s common for themes to highlight same-page menu items, so that’s what happens here.

      To revert this and use plugins highlighting, use the following CSS:

      header .navbar ul li .sub-menu li.current-menu-item a._mPS2id-h:not(.mPS2id-highlight):not(:hover){ background-color: inherit !important; color: inherit; }

      Let me know if it worked

      Reply
      • Mariana Mugeiro
        Posted on September 28, 2020 at 11:37 Permalink

        Yes, it worked! Thank you so much 🙂

        Reply
  28. Alex
    Posted on August 8, 2020 at 08:51 Permalink

    Hello!
    I’ve been using this wonderful plugin for months, but now I have had this problem for a few weeks: when I click on a link, scrolling behaves like this:

    1. it begins to flow smoothly
    2. the scrolling freezes for a few moments before reaching the target (where it stops depends on how far the target is within the page: the target is distant within the page, the more this effect is visible)
    3. then it finally reaches the target

    I don’t know if I managed to explain myself, but using the site it is very visible.

    What could be the reason?

    Thanks for the support!
    Alex

    Reply
    • malihu
      Posted on August 8, 2020 at 12:51 Permalink

      Hello,

      The reason for the issues you’re having is because of lower performance when the links in your page get highlighted.

      It seems that there are over 150 links that get highlighted in the page. You need to set which ones you actually want to get highlighted by the plugin.

      Go to plugin settings and set the “Highlight selector(s)” value to:

      #menu-lato a

      Click save changes and test your page.

      In addition, another script is highlighting your aside menu links (blue border and dark text). I can’t really say which one is it as it’s inside your wp-content/uploads/siteground-optimizer-assets directory but it seems to also have a performance impact on the page.

      If you only use this script (with the class .accendi) to highlight you links, you could disable “Page scroll to id” highlight feature (since you’re not using it) by setting “Highlight selector(s)” option value to:

      .nothing

      Hope this helps

      Reply
  29. Shahzad
    Posted on June 18, 2020 at 06:07 Permalink

    Hi,
    I am using the plugin in a template. ID’s are same for all the targets but for url, ofcourse it will be changed for every page using that template. How to deal with this please?

    Reply
    • malihu
      Posted on June 18, 2020 at 15:43 Permalink

      Hi,

      I’m not sure I understand the issue but you can use any type of URL in your links.

      If for example your targets are the same on every page, you can have links in the form of #buy, #rent etc.

      If your targets are on a specific page, you can have links with absolute URL like https://gharfirst.com/#homepage-section, https://gharfirst.com/some-page/#some-page-section etc. or relative-absolute URL like /#homepage-section, /some-page/#some-page-section etc.

      Hope this helps

      Reply
  30. Rajesh d
    Posted on June 1, 2020 at 22:12 Permalink

    Hi,

    Help me please!

    my website is http://www.elektragraphics.com, i used page scroll to id plugins it works on desktop version but when i check on mobile screen i was unable to scroll website till footer. Its stuck and bouncing.

    Reply
    • malihu
      Posted on June 2, 2020 at 07:03 Permalink

      Hi,

      I don’t think the plugin has something to do with this issue. What happens when you temporarily deactivate “Page scroll to id”? Can you scroll to the footer?

      Reply
    • malihu
      Posted on June 2, 2020 at 07:05 Permalink

      You also have another script in your theme that produces a js console error when scrolling the page. Maybe this is causing the issue(?)

      The theme script is:

      ...themes/the-monday/js/smoothscroll.js

      Reply

Comments pages: 1 7 8 9 10

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