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


424 Comments

Post a comment

Comments pages: 1 3 4 5

  1. Namit Behl
    Posted on March 18, 2019 at 21:15 Permalink

    Hi,

    I am facing issue with the sections its jumping to another section instead of one clicked.

    Please let me know i have implemented it on home page 2nd services tab.

    Can you please suggest the solution

    Reply
    • malihu
      Posted on March 20, 2019 at 16:16 Permalink

      Hi,

      It seems that the page jumps to the correct position. You’ve placed the targets above the “GET QUOTATION” button and this is where the page scrolls.

      I’m not sure how you want ti to work but if you want the page to scroll to the section title, you should move the target to the title or above the title (instead of quotation button).

      In addition, you could also use the .moto_header_wrapper selector as offset.

      Hope this helps

      Reply
  2. Ratko
    Posted on March 14, 2019 at 16:03 Permalink

    Hi,

    I’m having one specific issue, when I use RSS to pull data and send email versions of my WordPress posts, shortcodes which this plugin creates are not hidden. So all ID tags are shown and mess up the look of emails. I don’t see a way to hide them. Do you have any suggestions how can I hide the codes like they are hidden on WordPress posts and only shown in editor?

    Thanks!

    Reply
    • malihu
      Posted on March 14, 2019 at 17:59 Permalink

      Hello,

      This issue is out of plugin’s scope. It has to do with WordPress shortcodes (in general) and what code is used to send the emails. You need to google for a specific solution related to the script/plugin you use to pull the feed and send the emails.

      Reply
  3. Fouz
    Posted on March 13, 2019 at 17:14 Permalink

    Hello,
    I put my site on line, and when i look my site on mobile the links don’t work on home page, just the link for home work.
    In my menu i put custom links for my rubrics like that http://www.instantfleuri.fr/#boutique except for home link http://www.instantfleuri.fr .
    It work on desktop but not on mobile.
    Why? and what can i do?
    Thank you !

    Reply
    • malihu
      Posted on March 13, 2019 at 17:46 Permalink

      Hi,

      Your home page URL is http://www.instantfleuri.fr/en/home-2/. Your links have different URL than your actual homepage.

      For example, your “EN SAVOIR” link URL is:

      http://www.instantfleuri.fr/#boutique

      It should be:

      http://www.instantfleuri.fr/en/home-2/#boutique

      You should either change your links to match your homepage URL or change your homepage URL to http://www.instantfleuri.fr

      Reply
  4. Arthur
    Posted on March 13, 2019 at 12:02 Permalink

    Hello dear Malihu,
    I’m in love with your useful plugin, but I have some problems, it removes somehow the background of my blog, and in one post it made a space to go horizontal (in the cellphone).

    I would be very glad if you could check please what’s the problem , thank you:)

    The post link : (sorry it’s in Hebrew )
    https://saveforyourtrip.com/%d7%9e%d7%94-%d7%9c%d7%a2%d7%a9%d7%95%d7%aa-%d7%91%d7%a0%d7%90%d7%a4%d7%95%d7%9c%d7%99/

    Reply
    • malihu
      Posted on March 13, 2019 at 12:33 Permalink

      Hi,

      I can’t reach your site.

      The plugin does not modify theme and template files in any way. There must be an issue with your CSS.

      Reply
    • malihu
      Posted on March 13, 2019 at 12:41 Permalink

      OK, I just saw your page.

      The close button (with the x icon) of your mobile menu points to the page wrapper id (#page). You’ve set the .mPS2id-target background to be white. So your page wrapper element (#page) gets to be white.

      You need to exclude the #page element from the plugin. Go to “Page scroll to id” settings and change the “Selector(s)” option to:

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

      Save changes and test your page.

      Reply
      • Arthur
        Posted on March 14, 2019 at 17:41 Permalink

        Thank you very much!
        it’s a great plugin,and with a super support, thank you again 🙂

        Reply
        • malihu
          Posted on March 14, 2019 at 17:55 Permalink

          You’re welcome 🙂

          Reply
  5. Tobytwo
    Posted on March 10, 2019 at 15:30 Permalink

    hey,
    great plugin btw.
    1.) I have three links in one site and when i click them via the header menu, the whole site reloads and then jumps to the desired location. Is there a way to just make it jump to the locations without realoading the whole site everytime?
    2.) When one customlink was clicked in the headermenu, all of them turn colors to indicate they have been clicked, even thought I only clicked one.

    Can you give me a hint here please?

    Thank you

    Reply
    • malihu
      Posted on March 11, 2019 at 09:36 Permalink

      Hello,

      1)Make sure your links url matches your actual page url. For example, http vs https, www vs non www etc.

      2)Your links are most likely styled by your theme. This is because most themes style same-page and/or clicked links. If I could see your page I’d be able to tell you how to overwrite the CSS.

      Reply
  6. [email protected]
    Posted on March 8, 2019 at 16:43 Permalink

    This is an awesome plugin, but I seem to be having an issue. If you start from anything other than the ‘home’ link, and click on any other header link, then it works fine, but if you start at ‘home’ and click any other link, it passes the content and backs up to the right position. Please help me. Thanks

    yogabykmom.com

    Reply
    • malihu
      Posted on March 8, 2019 at 20:10 Permalink

      Hi,

      Not sure if you fixed the issue but I cannot reproduce what you describe. When I click on the menu links, the page scrolls to the target as expected(?)

      Reply
      • dave
        Posted on March 9, 2019 at 02:41 Permalink

        I did not fix the issue. I am using chrome, and it only seems to happen when the home link is involved, either navigating to it, or as the starting point. all other links work fine. I tried Edge browser to see if it worked, but it does not scroll at all, just jumps to the section, and overlaps really badly.

        Reply
        • malihu
          Posted on March 10, 2019 at 11:56 Permalink

          When I go to your site I don’t see the same behavior as on your video. The page scrolls correctly. Is there a chance you see a cached version of the page?

          Also, in Edge the page scrolls correctly. You probably had your browser window shrinked and you could not see the smooth scrolling because you’ve set the plugin to disable below 1024×600 pixels.

          Reply
          • Dave
            Posted on March 11, 2019 at 10:51 Permalink

            I did not see that you replied, but my screen is 1366×768, and Edge is maximized, yet it does not scroll.

          • Dave
            Posted on March 11, 2019 at 11:02 Permalink

            I installed the development version of your plugin, and Edge now scrolls. There is still a problem with the offset in Edge, though.

      • Dave
        Posted on March 11, 2019 at 05:48 Permalink

        I downgraded to elementor 2.4.7 and it seems to work in chrome. The Edge overlap problem is probably the sticky navigation, but it still does not scroll, it just jumps right to the anchor, like a regular anchor link would.

        Reply
        • malihu
          Posted on March 12, 2019 at 13:48 Permalink

          The offset in Chrome and Edge is exactly the same for me when I test your page (yogabykmom.com).

          Reply
  7. Jason C.
    Posted on March 5, 2019 at 06:23 Permalink

    Hi, in the latest version of the plug in, it seems like it’s locked to a scroll duration of 800ms. Even when I uncheck Auto-adjust scrolling duration, the number reloads at 800ms. In fact, even if I uncheck Auto-adjust and save without making any other changes, the check mark comes back. Am I missing something? I’d like to make the scroll occur more slowly.

    Thank you for the great plugin!

    Reply
    • malihu
      Posted on March 5, 2019 at 10:48 Permalink

      Hello,

      I cannot reproduce this issue and I haven’t got any similar support requests.

      Do you click the “Save Changes” button after making the changes? What you describe sounds like you’re clicking the “Reset to default” button.

      Can you change other options or does this happen only on Scroll duration options?

      Do you use WordPress multisite?

      Reply
      • Jason C.
        Posted on March 5, 2019 at 14:44 Permalink

        Thanks for the quick reply!

        I am definitely clicking on “Save Changes”.

        The changes stick on other options such as “Enable on WordPress Menu links” and “Normalize anchor-point targets”.

        Yes, I am currently using WordPress Multisite.

        Reply
        • malihu
          Posted on March 6, 2019 at 06:05 Permalink

          It’s because of using WordPress Multisite.

          Did you activate the plugin for the whole network? Are you logged-in as network admin (i.e. super admin)?

          Reply
          • Jason C.
            Posted on March 6, 2019 at 07:21 Permalink

            Yes, I activated for the entire network and have network admin privileges. Is the plugin not compatible with Multisite?

          • Jason C.
            Posted on March 6, 2019 at 07:28 Permalink

            To be clear, the plugin works perfectly other than the scroll duration. Everything else seems to work as designed, and it’s great!

        • malihu
          Posted on March 6, 2019 at 07:57 Permalink

          I see. I can’t really say why this happens right now as I’ll have to make some tests. I’ll post an update here.

          Reply
        • malihu
          Posted on March 6, 2019 at 09:55 Permalink

          Hello again,

          I just made some tests and you definitely found a bug! I’ve just pushed a fix for this issue in plugin’s development version which you can download here:

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

          Please download/install/activate the development version (after deactivating and deleting the current one) and let me know if everything works.

          Reply
          • Jason C.
            Posted on March 6, 2019 at 23:18 Permalink

            Yes, that seems to have fixed the issue. Thank you very much!

        • malihu
          Posted on March 7, 2019 at 08:55 Permalink

          You’re welcome 🙂

          Reply
  8. Joel Mellin
    Posted on February 20, 2019 at 21:04 Permalink

    Hi,

    When I click “Test” in the menu, it takes a very long time before the page scrolls down. It seems like the loading of either the page or the plugin is very long or that it is set to delay the scrolling.

    Reply
    • malihu
      Posted on February 22, 2019 at 18:30 Permalink

      Hello,

      I just checked your page and:

      1)You don’t have “Page scroll to id” installed or activated.

      2)”Page scroll to id” plugin script is 18kb so it loads very fast.

      3)”Page scroll to id” as well as any other plugin of this kind, start functioning after the page and all its assets (images, elements, external sources etc.) is fully loaded. Otherwise clicking a link will scroll to the wrong position.

      4)Your page takes about 1 to 2 minutes to load (which is extremely long) and it seems that the reason is this script:

      https://events.jotform.com/form/51714537543355/...

      You can check the info, time, status etc. of all page assets by opening your page in Google Chrome and have developer tools -> Network tab opened.

      Hope this helps.

      Reply
  9. Aaron Youngren
    Posted on February 14, 2019 at 22:38 Permalink

    I’ve been using this awesome plugin for a year now. That said, it seems like with the latest upgrade to WordPress, the scrolling seems broken. Scrolling from the menu is really clunky, and not smooth at all. I’m sure I’m just missing something. Do you have any idea why that might be happening?

    Reply
    • Aaron Youngren
      Posted on February 14, 2019 at 22:38 Permalink

      Sorry, example is here: https://greatcommissiondesign.us/nlbfcnewton

      Try clicking a menu link.

      Reply
    • malihu
      Posted on February 14, 2019 at 23:08 Permalink

      Hello,

      This is not about some upgrade. You have another plugin (mobile menu) which handles your links and prevents “Page scroll to id” from doing its thing. Don’t know if you installed (or updated) this plugin recently, but this is causing the issue.

      The script that does this is (function starts on line 162):

      ...plugins/mobile-menu/includes/js/mobmenu.js

      Try this:

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option.

      Save changes and test your page.

      Let me know if it works.

      Reply
  10. Thierry
    Posted on February 4, 2019 at 19:34 Permalink

    Hi and first of all, Thanks a lot for this plugin. It s doing a great job!

    Nevertheless I experience an issue on my website with the last link/target of the wordpress menu.

    All the five other targets are working perfectly and leads the visitor according to his click.

    The 6th anchor nevertheless brings back (a bit) below to the top of the page. I have checked the coding (the 6 of them are the same), and the settings and I dont understand why it’s not working with only one of them (the 6th of the menu list, called “blog”). I wonder if there is a limit of use per page or per menu.

    In case of doubt, you can have a look to my home page.

    I look forward to reading your advice. Many thanks in advance for your help.

    Thierry

    Reply
    • malihu
      Posted on February 14, 2019 at 23:12 Permalink

      Hello,

      Sorry for the late reply but it seems I somehow missed your comment.

      I checked your page and the “Blog” link points to a different page/URL, so it’s not handled by the plugin. I don’t know if you changed it, fixed it or need more help(?)

      Reply
  11. Stephan
    Posted on January 25, 2019 at 15:49 Permalink

    I love this plug-in, but since we upgraded to the WP Gutenberg edition the link/target button’s do not appear in the editor. Will there be an update that fixes that or will I need to use shortcode?

    Reply
    • malihu
      Posted on January 26, 2019 at 02:56 Permalink

      Hello,

      Right now, the best way to use the plugin with Gutenberg is with plugin’s shortcodes.
      “Page scroll to id” shortcodes do exactly the same thing as the toolbar buttons on the classic/old editor.

      With Gutenberg, you can create links and targets with shortcodes via Gutenberg’s shortcode block (under Widgets).

      Using the shortcodes gives you more control because you can use all the options for individual links and targets (offset, class and target attributes), the same way you did with plugin’s toolbar buttons on the old editor.

      This said, you can simplify your workflow by changing plugin’s “Selector(s)” option to:

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

      This way you no longer need to create links with the ps2id shortcode, as any link you create in Gutenberg or classic editor will be handled by “Page scroll to id” (as long as it points to an in-page target of course).

      In addition, Gutenberg provides the option to add an id to its heading blocks (under common blocks). Insert a heading block, click “Advanced” in block settings and insert the target value (i.e. id) you want in “HTML Anchor” field. You can then use this id in your link’s url.

      So if you use targets mainly on headings, you can also avoid using plugin’s ps2id target shortcode.

      FYI:
      I’m planning on adding a target block for Gutenberg and an inline link element in the future. I’ll need to do extensive testing for this and also consider what other updates Gutenberg will get, as they might add such blocks by default.

      I’m not rushing this because Gutenberg is fairly new and will probably get new similar blocks in the near future. I also prefer to let Gutenberg work for a while and have a stable API before using it.

      Sorry for the long reply!
      Hope this helps 🙂

      Reply
  12. Perica Bukic
    Posted on January 21, 2019 at 19:55 Permalink

    Hello,

    Thanks for the great plugin, is it possible to hide [ps2id id=’some-id’ target=”/] codes from visual editor? And replace it with anchor icon or something similar.

    Cheers

    Reply
    • malihu
      Posted on January 21, 2019 at 22:15 Permalink

      At the moment there’s no such feature. The main reason is that ps2id can be used as an anchor-point target ([ps2id id='some-id'/] ) and/or wrapper target ([ps2id_wrap id='some-id']your content...[/ps2id_wrap] ). Using icons for both can be a little tricky.

      Reply
      • Perica Bukic
        Posted on January 22, 2019 at 01:14 Permalink

        Alright, one more quick question, what’s the actual difference between using ps2id for setting anchors when compared to doing it with this: <li><a href="#anchor">Anchor</a></li>

        Reply
        • Perica Bukic
          Posted on January 22, 2019 at 01:17 Permalink

          Sorry, I meant with this:
          <h2 id="link">RandomLink</h2>

          Reply
          • malihu
            Posted on January 23, 2019 at 19:30 Permalink

            There’s no difference.

            Both work exactly the same. It’s just that the plugin provides ways (e.g. via shortcode) to add page anchors/targets without having to write HTML.

            Basically, you can add a target id anyway you want (with HTML, via shortcode etc.). In addition, most page builder plugins provide ways to add an id to their block elements, which does exactly the same thing.

            The only additional benefit when using the ps2id shortcode, is that it offers the target attribute, which you can use like this:

            [ps2id id='some-id' target='#another-id'/]

  13. LAtelier
    Posted on January 18, 2019 at 22:36 Permalink

    Hi there! Your plugin is pretty awesome, thank you! I am suing it with a super simple theme called Blankslate and with WP Bakery Page Builder. There isn’t any other plugin installed.

    One problem I have is with Microsoft Edge and on mobile: when the plugin is activated, the anchor links created with WPBakery Page Builder on the same page are not working. So for example if I have a Get Started button at the top which is supposed to scroll to the bottom of the page, it works on Chrome and Firefox but not on Edge and not on mobile. When I disable your plugin, the link works and “jumps” to the bottom section on both mobile and Edge. So that means the conflict is between your plugin and Page Builder probably. Can you try on your end and let me know if you are encountering the same issue?

    Let me know! Thank you for your time!

    Reply
    • malihu
      Posted on January 20, 2019 at 19:27 Permalink

      Hello,

      I haven’t encountered this problem with WPBakery Page Builder.

      The issue you describe might happen for any number of reasons. I can’t really know where the “Get Started” button links to and how exactly it works.

      Is it possible to post your page/site url so I can check what happens?

      If not, you can try changing plugin’s selector (“Selector(s)” option in plugin settings) so it doesn’t handle this particular link. For example, changing the “Selector(s)” option to:

      .menu-item a

      instructs “Page scroll to id” to handle only the links in your menu(s).

      You could also try enabling the “Prevent other scripts from handling plugin’s links” option and see if it fixes the issue.

      In general, “Page scroll to id” is browser agnostic. If it works in one browser, it should work on every browser but sometimes other scripts might also handle the links which might cause an issue. I’d need to see your page in order to see what exactly happens and help.

      Also, check this guide as it might help:
      http://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/

      Reply

Comments pages: 1 3 4 5

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