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 2

  1. Billy Smith
    Posted on August 13, 2017 at 22:12 Permalink

    I am sorry for the typo above. The URL is this

    • malihu
      Posted on August 14, 2017 at 01:38 Permalink

      Your links are handled by another script which prevents “Page scroll to id” from doing its thing. The cached/minified script is:
      line: 22

      Go to “Page scroll to id” settings and try enabling “Prevent other scripts from handling plugin’s links” option. Save changes and test your link(s).

      • Billy Smith
        Posted on August 14, 2017 at 14:26 Permalink

        I have selected that option now. Still it’s not working.

        • Billy Smith
          Posted on August 14, 2017 at 14:33 Permalink

          I can see a strange thing happening, where ever in the id I add $ that works perfectly fine and in the rest urls its same.
          Check here

          • malihu
            Posted on August 15, 2017 at 18:27 Permalink

            Your link “Bands –Single, Dual and Tri-band” causes a js console error. This is because you have an empty space in its URL:
            #Bands –Single-Dual-and-Tri-band

            Edit your page and remove the space from link’s URL/href and test again to see if it fixes the issue.

          • Billy Smith
            Posted on August 15, 2017 at 19:39 Permalink

            Corrected it thanks a lot. Please check my another comment.

            This link

          • malihu
            Posted on August 15, 2017 at 20:01 Permalink

            The problem you had is now fixed (I just tested it). The issue you had was because of this error.

        • malihu
          Posted on August 14, 2017 at 15:25 Permalink

          If the option does not work, you need to do it manually.

          You have to edit the script I posted above (179d3.js), find the text:
          and replace it with:

          Replace exactly what you see above.

          I can’t see any other way of fixing this because your theme (or another plugin?) is actively preventing other plugins (like “Page scroll to id”) from handling links with hash (#) and scrolling the page.

          Adding $ in the URL prevents page from scrolling at all.

          • Billy Smith
            Posted on August 15, 2017 at 14:23 Permalink

            The plugin is working fine but still one issue is there.
            When I open link with id in a fresh window, it doesn’t take to my id. Check
            this url
            I have already selected
            Scroll from/to different pages (i.e. scroll to target when page loads)

  2. Billy Smith
    Posted on August 13, 2017 at 21:02 Permalink

    I have enabled the option to show #id in the URL but it is not working. I have tried everything. Kindly check and let me know why this is not working.

  3. blake
    Posted on August 11, 2017 at 23:50 Permalink

    Hi there, I’m trying to have my page scroll to the top of a widget, but even if I add offset it still scrolls all the way to the top of the page.

    There’s a big blue button on my homepage that says “GET A FREE QUOTE” and I’d like the page to scroll to the anchor/id I’ve added to the Quote widget. I can’t seem to get the offset right, so the top of the widget is hidden behind the sticky nav.

    Thanks in advance,

    • malihu
      Posted on August 14, 2017 at 01:28 Permalink


      The target you’ve added is below widget’s title (it’s within the widget content), so the “top” of the widget (which includes its title) gets “hidden” behind the sticky menu.

      You should either increase the link’s offset (e.g. to 150) or add the target via plugin’s target widget (instead of shortcode).

  4. Jeremy
    Posted on August 8, 2017 at 17:42 Permalink

    For some reason when I use the browser URL’s ( instead of the hash links (#aboutus) it highlights all of the sections on the page. So the rollover effects in my menu always stay activated. Is there a way to fix this?

    • malihu
      Posted on August 14, 2017 at 01:19 Permalink

      The links are highlighted by your theme (not the plugin), so it’s not something to be fixed within the plugin.

      You need to change the theme’s CSS rules that “highlight” same-page links. If you add something like the following in your theme’s custom CSS, it’ll probably do the trick:

      #main-nav > li.act > a._mPS2id-h{ color: #fff; } .upwards-effect>li>a._mPS2id-h>span:before{ opacity: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } .upwards-effect>li>a._mPS2id-h:hover>span:before, .upwards-effect>li:hover>a._mPS2id-h>span:before{ opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }

      I got the CSS selectors above by your theme’s stylesheet files (custom.css, main.css etc.).

  5. Hervé Huchon
    Posted on August 7, 2017 at 13:14 Permalink

    Hi there,
    I’m using mapSVG plugin for wordpress which displays markers on a map. I want to link these markers to anchors below in the same page. But I can’t make page scroll to id work in this environnement … although I’ve managed to make it work in other pages.
    Is there a chance you could help, or even now the problem here ?
    Thanks a lot for your help.

    • malihu
      Posted on August 7, 2017 at 13:40 Permalink


      I think that the only way to do this would be via javascript by using plugin’s scrollTo method.

      Something like:

      (function($){ $(window).on("load",function(){ $(".mapsvg-marker[href*='#']").click(function(){ var target=$(this).attr("href"); $.mPageScroll2id("scrollTo",target); }); }); })(jQuery);

      The above should be in a script tag at the bottom of your HTML (e.g. right before the closing body tag).

      • Hervé Huchon
        Posted on August 7, 2017 at 16:06 Permalink

        Thanks for helping.
        Unfortunately, this doesn’t work either …


        • malihu
          Posted on August 14, 2017 at 00:59 Permalink

          Well, I guess it won’t work with your map.

          The map has image elements with some custom (or hidden) data attribute that can’t be used by other scripts. There are no link elements in the SVG (only image elements). If the SVG contained elements with an actual href attribute that pointed to some id it would work but as it is now, the plugin (or any other plugin) won’t work.

  6. Wenche
    Posted on August 5, 2017 at 18:44 Permalink

    After updating wordpress my links no longer scroll. I have tryed deactivating the plugin and reactivating it, but there is no difference. Before the update the scroll was perfect and elegant (from all my links in the footer).

    • malihu
      Posted on August 6, 2017 at 12:34 Permalink


      This is not related to “Page scroll to id”. I get about 35 jquery errors in console when opening your page. Those js errors indicate that jQuery is not defined.

      None of your jquery scripts is currently working (woocommerce, tabs, widgets, ps2id etc.).

      You either have a corrupted jquery script (...wp-includes/js/jquery/jquery.js) or your SSL is somehow prevents jquery library from loading.

      I’d suggest to try replacing jquery.js with a fresh one which you can get from WordPress zip archive or

  7. JD
    Posted on August 2, 2017 at 17:54 Permalink

    I already post this once but I wasn’t sure if it went through, I didn’t receive any confirmation and my post isn’t appearing. I’m having the same problem Ryan was. I can’t get your plugin to scroll, I’ve tried everything including the suggested above. It jumps straight down to the target without scrolling. I’m hung up not knowing if I can use your plugin or not which is causing me to lose development time.

    Thanks for your help, JD

    • malihu
      Posted on August 3, 2017 at 11:24 Permalink

      You need to enable the plugin on your link. Go to plugin settings and change the “Selector(s)” option value to:


      Save changes and test your link.
      Let me know

  8. JD Ford
    Posted on August 2, 2017 at 16:59 Permalink

    Hey there! I’m having the same problem Ryan was. If I reload the page it will scroll but it just jumps not matter what I do. I followed the instructions above but it hasn’t changed anything. Help please?

  9. Tim Boyd
    Posted on July 26, 2017 at 01:19 Permalink

    Hi there, how do I use your plugin with an image map? It looks like this:

    <img src="" alt="" usemap="#Map" /><map name="Map" id="Map"> <area alt="" title="area-01" href="#01" shape="poly" coords="00, 10, 20, 40" /> <area alt="" title="area-02" href="#02" shape="poly" coords="50, 60, 70, 80" /> </map>

    When I click on area-01 it hard jumps to #01. How can I use the smooth scroll here?

    • malihu
      Posted on July 26, 2017 at 19:03 Permalink


      Try this:
      Go to plugin’s settings and change “Selector(s)” field to:

      a[rel='m_PageScroll2id'], area[href*='#']

      Save changes and test.
      Let me know

      • Tim Boyd
        Posted on July 27, 2017 at 18:07 Permalink

        Works like a charm… Thanks a bunch!


        • malihu
          Posted on July 28, 2017 at 04:53 Permalink

          You’re welcome!

  10. Dome
    Posted on July 15, 2017 at 01:12 Permalink

    it is working well but i need something working with custom tabs, i have woocommerce product with custom tabs, one of this tabs contain contact form and id at the beginning of the form, so the problem is when you select the single product the default tab is “description” , trough button link I can jump to form tab but without scroll, so what can I do for to go directly from the product page at the form tab and scroll to id anchor?


    • malihu
      Posted on July 16, 2017 at 20:19 Permalink


      Try enabling the plugin on your tab links. Go to plugin settings and change “Selector(s)” value to:

      a[rel='m_PageScroll2id'], .woocommerce-tabs li a[href*=#]:not([href=#])

      Save changes and test the tabs.

      Let me know

      • Dome
        Posted on July 16, 2017 at 23:15 Permalink

        I’ve tried but don’t try, or maybe i didn’t explain well the problem
        I give you the link of the page using for testing

        so trough a snippet in the function file , I can change the tabs using link like #tab-new, if you click the Inquire button you can see the tab is changed but don’t scrool the page at the correct anchor, but if you click now in the “Scroll to the form” link below the button (it use your plugin as anchor) you can see it work. The complete process require two clicks and is no good, i need one click only for to go at the anchor starting from another tab .
        With the previous version of woocommerce it was trying the snippet but now no more, for this reason i search help in your plugin
        I’have removed your suggestion code so you can try the original situation

        • malihu
          Posted on July 17, 2017 at 13:07 Permalink

          So, you need to click the “Scroll to the form” link (or any link like this) and it should do 2 things:
          1) Switch “Inquire about this product” tab.
          2) Scroll smoothly to the target.
          Is this correct?

          If the above is what you want, you’ll need to do it via javascript. Can you add a javascript/jQuery code in your theme?

          Let me know if there’s a place in your theme for custom javascript so I can post a script to test.

        • malihu
          Posted on July 17, 2017 at 23:17 Permalink

          OK. Firstly you need to change your “Scroll to the form” link to point to the actual tab id.
          So change its URL from:

          Then, add the following to your functions.php:

          function ps2id_to_woocommerce_product_tab() { if( is_product() ) { ?> <script type="text/javascript"> (function($){ $(window).on("load",function(){ $("a._mPS2id-h").on("click",function(e){ var $this=$(this), targetID=$this.attr("href"), targetTab=$("ul.tabs li a[href*='"+targetID+"']"); if(targetTab.length){ e.preventDefault(); targetTab.parents("ul.tabs").find(".active").removeClass("active"); targetTab.parent("li").addClass("active"); $(".woocommerce-Tabs-panel:visible").css("display","none"); $(targetID).css("display","block"); } }); }); })(jQuery); </script> <?php } } add_action( 'wp_footer', 'ps2id_to_woocommerce_product_tab', 30 );

          Save and test the link. It should switch tabs and scroll to the active tab.

          You can use the same script for the other tabs if you want. For example, if you create a “Page scroll to id” link with URL #tab-description, it will switch to the “Description” tab and scroll to it.

          Hope this helps

          • Dome
            Posted on July 18, 2017 at 11:35 Permalink

            Weel done Malihu and thank you very much,
            it is working perfectly, very good solution for to use the page scroll to id for wordpress plugin even if you want to navigate to another custom tab.
            To help future users i can explain the system:
            before i have installed Custom Product Tabs for WooCommerce plugin and create new tab with inside contact form 7 form,
            after that i have installed the Malihu plugin “page scroll to id for wordpress” , after that i have implemented in the function theme file the snippet created by Malihu and it is all. Just take care when you create the “page scroll to ID link” don’t do as shortcode, leave the box unchecked .

            Thank you again


        • malihu
          Posted on July 18, 2017 at 14:30 Permalink

          Great ! Thanks for the extra info 🙂

  11. Ryan
    Posted on July 13, 2017 at 10:27 Permalink

    Hey! Great plugin! I’m having a slight issue though. When I assign a link as #section_ID, the page jumps to that section without a scroll. However when I do the whole, it scrolls but reloads the page first (as expected). How can I get the scrolling action with just the section ID? I’d like to note that I can apply the whole link with tag to a menu item and the page does not reload before scrolling, however, this doesn’t work when I put the link on a button on my page.

    • malihu
      Posted on July 13, 2017 at 11:25 Permalink


      Is the button a link element (i.e. anchor tag)?

      If yes, there’s chance that your theme takes control of the menu links and prevents “Page scroll to id” from scrolling the page. In such case try enabling “Prevent other scripts from handling plugin’s links” option in plugin settings.

      Is your site online so I can check it?

      • Ryan
        Posted on July 13, 2017 at 11:30 Permalink

        Ah posted at the same time – thanks for the quick reply! I did enable the “prevent other scripts..” and I’m still getting the jumps between sections.

    • Ryan
      Posted on July 13, 2017 at 11:28 Permalink

      I also should note that I have configured my site to not use the www. prefix. Site is linked in the “website” section. Thanks in advance!

      • malihu
        Posted on July 13, 2017 at 11:39 Permalink

        OK I checked your page. I think you just need to enable the plugin on your buttons elements.

        Go to plugin settings and first disable “Prevent other scripts from handling plugin’s links” option as you don’t need it. Then, change the “Selector(s)” field value to:

        a[rel='m_PageScroll2id'], .btn[href*='#']

        Save changes and test your buttons. Everything should be working 😉

        • Ryan
          Posted on July 13, 2017 at 20:00 Permalink

          Wow, you are fantastic!! Thank you so much for your help! 😀

          • malihu
            Posted on July 13, 2017 at 22:42 Permalink

            You’re welcome 🙂

Comments pages: 1 2

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>