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


161 Comments

Post a comment

Comments pages: 1 2

  1. Alexandr
    Posted on October 2, 2017 at 07:36 Permalink

    Everything works fine, thank you very much.
    At you on a site the demo costs the menu from above displays scrolling of pages. Give please the name of the paling, really liked.

    Reply
  2. Ruggy
    Posted on September 28, 2017 at 17:59 Permalink

    Love the wordpress plugin, but for some reason I cant get it to work on mobile, any ideas?

    Reply
    • malihu
      Posted on September 28, 2017 at 18:14 Permalink

      I can’t say. I’d need to see your site in order to help. Can you post your link?

      Reply
      • Ruggy
        Posted on September 28, 2017 at 20:22 Permalink

        Theres the link. Thanks for your help!

        Reply
      • Ruggy
        Posted on September 28, 2017 at 20:23 Permalink
      • Ruggy
        Posted on September 29, 2017 at 02:20 Permalink

        I have another question… how can I get the “home” button to go back to the home page? I have the url set, but it doesnt do anything….

        Reply
        • malihu
          Posted on September 29, 2017 at 02:43 Permalink

          About the home link:

          Give the home link a URL of #top:
          your-url/#top

          About the mobile links:

          Your theme has its own functions attached on the menu links. These might prevent “Page scroll to id” from scrolling the page on mobile. Try enabling the Prevent other scripts from handling plugin’s links option in plugin settings and test if it fixes the issue.

          Also, if you deactivate “Page scroll to id”, do the mobile menu links work?

          Reply
          • Ruggy
            Posted on September 29, 2017 at 03:19 Permalink

            Alright, so I got the home link to work, thank you!

            Now im a little confused on the “Page scroll to id” youre talking about… can you elaborate?

        • malihu
          Posted on September 29, 2017 at 15:37 Permalink

          Go to WordPress admin -> Plugins and Deactivate “Page scroll to id”. Then, check you site on mobile and see if the menu is working (what happens when you click the links?)

          If the mobile menu doesn’t work with or without “Page scroll to id” activated, then the issue is within your theme.

          Reply
          • Ruggy
            Posted on October 13, 2017 at 18:09 Permalink

            Menu does not work when I deactivate the plugin…

        • malihu
          Posted on October 14, 2017 at 00:50 Permalink

          Then the problem with the mobile menu is within your theme.

          Reply
  3. Mike Brogan
    Posted on September 13, 2017 at 13:50 Permalink

    Is it possible to have different colour highlighting for each menu option: e.g. red for Menu Option 1; green for menu Option 2; etc.?

    Reply
    • malihu
      Posted on September 15, 2017 at 01:31 Permalink

      Highlight styling is done with CSS, so you can style each of your links accordingly. The plugin does not colorize the highlighted links (it only marks each link as highlighted).

      More info on links highlighting

      Reply
  4. Flo
    Posted on September 3, 2017 at 21:17 Permalink

    Hey! Thanks for the great and easy to use plugin. I have a question to the mobile use. Can i change the offset on mobile? My navigation is fixed and the height changes on under 768px.

    Reply
    • malihu
      Posted on September 4, 2017 at 00:34 Permalink

      Yes, please see offset expressions section above.

      Reply
      • Flo
        Posted on September 5, 2017 at 15:44 Permalink

        Awesome, that’s nice. I typed the id of my menu (.navbar) and the offset scroll is perfect on desktop and mobile. Thanks a lot!

        Reply
  5. Tatsiana
    Posted on September 3, 2017 at 21:15 Permalink

    Good day, I have a question about the plugin usage. I am building a website with Sydney theme using the Elementor builder plugin. This plugin does not show panel grid for page ID. So I installed Page Scroll to ID Plugin. To assign ID to page sections I use “Page Editor” as shown in the examples, and it works, but then my home page loses all the customization that I have done through the Elementor plugin. If I return page appearance to the state I have done, the custom link I have created is not working. So, how can I make the Elemetor styled page work together with your plugin? Thank you very much

    Reply
    • malihu
      Posted on September 4, 2017 at 00:49 Permalink

      Hello,

      I can’t really help as I don’t know how Elementor or Page Editor work. Maybe the theme has id attributes already set that you can use(?) You can search them by opening your page in a browser with developer tools.

      Can you insert shortcodes in page builder? If yes try using plugin’s shortcodes to create targets and/or links.

      I’m not sure if the following link helps:
      https://www.youtube.com/watch?v=ZIdppV7MbD8
      but you could probably create the targets with anchor widgets (as seen in the video link) and then go to “Page scroll to id” settings and change the “Selector(s)” field to:
      a[href*=#]:not([href=#])
      so it handles any links that point to such target anchors.

      Reply
      • Tatsiana
        Posted on September 12, 2017 at 09:23 Permalink

        Thank you very much. The link to the video was very helpful. It solved my problem.

        Reply
  6. Cole
    Posted on September 1, 2017 at 14:54 Permalink

    Nice and great info. can you tell me please how I can do the same thing for this page

    Reply
    • malihu
      Posted on September 1, 2017 at 16:11 Permalink

      1. Install & activate plugin.

      2. Go to plugin settings and insert:
      [rel='m_PageScroll2id'], #toc_container .toc_list a
      to “Selector(s)” field.

      3. In plugin settings, enable “Prevent other scripts from handling plugin’s links” option.

      4. Save changes and test your page.

      Reply
  7. Blabla
    Posted on September 1, 2017 at 13:57 Permalink

    Thanks a lot, very good work! Keep the good work!

    Reply
  8. Murali
    Posted on August 31, 2017 at 23:36 Permalink

    I have a problem two links enable at a time I have checked highlight only one at a time but it’s not working please give a solution. Thank you Here is Error Link: http://prntscr.com/gfjuwb

    Reply
  9. Rocky
    Posted on August 18, 2017 at 23:37 Permalink

    Great addon it works well but I’m having trouble getting the scrolling functionality to work with Visual Composer.

    My issue is VC is using it’s own shortcode for buttons and I’m not exactly sure how to use insert the ps2id into the link to make it work. Here is the VC button shortcode
    [argenta_sc_banner_box block_type_layout="full" block_type_full_align="center" block_type_subtitle="after" title="Title" subtitle="Subtitle" description="description" background_image="6302" link_url="url:%23seo|||" button_typo="weight~inherit" readmore_button="type=default&size=default" css_class=""]

    I might be missing something obvious.

    Thanks Malihu!

    Reply
    • Rocky
      Posted on August 18, 2017 at 23:59 Permalink

      Nevermind, figured it out. But if anybody else stumbles upon these comments the solution is just to add “ps2id” to the custom class of a button.

      Reply
      • malihu
        Posted on August 19, 2017 at 19:20 Permalink

        Yes that’s the easiest way to enable the plugin on these links. Thanks for posting the solution!

        Reply
  10. [email protected]
    Posted on August 18, 2017 at 16:27 Permalink

    Hi,

    I’m trying to use the page scroll to id plugin with visual composer elements (section or rows).
    After having created the ID by filling the required option in VC, i have created a button to target the full url (i.e URL: https://mywebsite.com/index.php/Mypage/#Mytarget).

    When i refresh the page to try to click the button to go to the targeted section, the page scroll well.
    But after moving to another section with the mouse , i try to click again the button to target the same section again, but the offset position is totally different from the first one.

    Do you know how i can be sure that all clicks over the button will make me jump exactly in the same position ?

    Thank you for your help.

    best regards,

    Daté.

    Reply
    • malihu
      Posted on August 18, 2017 at 20:29 Permalink

      Hi,

      I can’t really help with such issue unless I see your page. Can you post your site’s URL?

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

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

    Reply
    • 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:
      ...wp-content/cache/minify/179d3.js
      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).

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

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

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

          Reply
          • 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:
          o('a[href*="#"]:not([href="#"]):not([href^="#tab"])').click
          and replace it with:
          o('a[href*="#"]:not([href="#"]):not([href^="#tab"])').not("._mPS2id-h").click

          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.

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

  12. 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.

    Reply
  13. 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,
    B

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

      Hello,

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

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

    For some reason when I use the browser URL’s (http://suttoncompany.com/update/#aboutus) 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?

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

      Reply
      • Jeremy
        Posted on August 21, 2017 at 19:30 Permalink

        That worked, thank you so much for your time and your help with this.

        Reply
  15. 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.
    !!
    Hervé

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

      Hi,

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

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

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

        Hervé

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

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

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

      Hi,

      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 jquery.com.

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

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

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

      Save changes and test your link.
      Let me know

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

    Reply
  19. 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="http://my-domain.com/my-image.jpg" 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?

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

      Hi,

      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

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

        Works like a charm… Thanks a bunch!

        Cheers

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

          You’re welcome!

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

    Hello,
    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?

    Thanks

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

      Hi,

      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

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

        Hi
        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
        link

        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
        Thanks

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

          Reply
        • 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:
          #form
          to:
          #tab-inquire-about-this-product

          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

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

            Dome

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

          Great ! Thanks for the extra info 🙂

          Reply
  21. 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 http://www.website.com/#section_ID, 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.

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

      Hi,

      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?

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

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

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

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

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

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

css.php