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


858 Comments

Post a comment

Comments pages: 1 7 8 9

  1. erik
    Posted on May 24, 2022 at 18:19 Permalink

    hi there

    Thanks for the wonderfull plugin.
    I have a weird problem with it.

    The plugin works for all links, except for the mobile menu on the homepage. Desktop menu on the same page works. mobile menu on other pages works. its just the mobile menu on this one page that wont execute the script.
    im using divi builder

    Cant figure out whats wrong. help would be highly appreciated.

    Thanks

    Reply
  2. Sodga
    Posted on May 19, 2022 at 23:49 Permalink

    Hey Malihu!

    Really nice work on the plugin, works flawlessly!

    Is it possible though, to have certain padding in this auto scroll js with your plugin:

    <script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#section-1").length) return; var $delay=2200; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#section-1"); },$delay); }); })(jQuery); </script>

    To clarify – I need the website to scroll not to ID (in this case section-1) but slightly above. There is a simple work-around, create a empty row with padding, but in my case it later on adds too much additional space. So the best solution would be adding certain padding options which could let the code scroll slightly above/below the directed section, thank you!

    Reply
    • malihu
      Posted on May 20, 2022 at 02:52 Permalink

      Hi,

      Depending on the layout and design of your page, you might be able to do what you need with a bit of negative top margin and an equal positive top padding on the element:

      #section-1{ margin-top: -100px; padding-top: 100px; }

      Alternatively, you might be able to achieve something similar with a :before css pseudo-element with an absolute position and a negative top value, e.g. something like this:

      #section-1{ position: relative; } #section-1::before{ content: ""; display: "block"; left: 0; top: -100px; }

      I’m not sure if any of the above will work in your case (I’d have to see your page to know) but try it and let me know.

      Reply
    • malihu
      Posted on May 20, 2022 at 03:01 Permalink

      Also, note that the CSS solution I provided will always work on the element, i.e. will offset scrolling when auto-scrolling on page load, when clicking a link etc.

      If you only want to offset the auto-scrolling in the page load code and not change the element’s actual offset, you can try changing the scrollTo method in the code like this:

      $.mPageScroll2id("scrollTo","#section-1",{ offset:100 });

      Reply
  3. Sam
    Posted on April 28, 2022 at 13:06 Permalink

    Hello, I’m really happy with this plugin and really like how it works on my site. However, I recently setup a frame redirect for another domain I own, and the plug in doesn’t appear to be working when that site URL is present. Has this happened to anyone else? Any tips?

    Reply
    • malihu
      Posted on April 28, 2022 at 14:06 Permalink

      Hi,

      Can you post your page/site URL so I can check what happens?

      Reply
      • Sam
        Posted on April 28, 2022 at 15:49 Permalink

        Unfortunately the site isn’t live yet (it’s on an under construction page) but I have been briefly putting it live for testing. Basically the plugin works completely fine on my normal website, but when accessed via the redirected url (which is redirected as a frame redirect to preserve the url) the plug in doesn’t work. Interestingly enough the menu options do still jump to the correct position on the page, just not with the scrolling effect.

        Reply
        • malihu
          Posted on April 28, 2022 at 18:42 Permalink

          I see. Unfortunately the plugin (like many js scripts) does not work inside iframe(s).

          This said, you can try/test the following and see if it solves the issue:

          1)Add the following in your wp-config.php (this file is in site’s root dir):

          define('PS2ID_MINIFIED_JS', false);

          Save the file.

          2)Edit plugin’s jquery.malihu.PageScroll2id-init.js file which is inside the js folder in plugin’s directory.

          Add the following code below line 173 (liveSelector:_o.instances... ...+autoSelectors):

          ,inIframe:true

          so code becomes like this:

          ...["selector"]+",."+shortcodeClass+","+autoSelectors ,inIframe:true }); //scroll to location hash on page load ...

          Save the file and test your iframe to see if it worked.

          Reply
          • Sam
            Posted on May 3, 2022 at 18:17 Permalink

            Hi, thanks for the response, I’ve only just been able to see it. It’s not in an iframe, it’s just the method of redirection – so the domain provider basically sends visitors to the domain (say domain x) to my website (domain y) but masks the address with the domain (domain x) they’ve typed in. This particular redirection is called frame redirection. This also means that my domain (x) doesn’t have any hosted folders and therefore no php or js elements to be edited.

            Does that make sense? If not, I guess it will just have to be a peculiarity that I’ll have to live with.

            Thanks for your help so far

        • malihu
          Posted on May 3, 2022 at 23:07 Permalink

          What URLs have you set in your links? Are they like #my-id or http://mydomain/#my-id? If it’s like the latter try to change them to use root-relative URLs like /#my-id

          If the above doesn’t work, I think you still need to try editing jquery.malihu.PageScroll2id-init.js in your “domain y” files and see if it works.
          You need to make the changes in “domain y” files (it doesn’t matter if “domain x” has no directory).

          Reply
  4. [email protected]
    Posted on April 3, 2022 at 21:49 Permalink

    Hello,
    I love the plug in’s ability.

    I’ve followed the instructions for installing and connecting PageScroll to ID.
    I’m using WP theme Twenty Seventeen.
    I used it a few years ago developing locally with no issue.

    This time, the scrolling doesn’t function as expected.
    It reloads the page on each menu selection- then scrolls to the section once the page reloads to the header.

    I’ve read some of the solutions you provided to others.
    My site- since its in localhost right now- doesn’t have the issue with https / http. Its http.

    I’m not sure what else to check for why its behaving with a reload on each menu selection.

    the format of the URL in the custom links is:
    http://localhost:8888/threeRivers/#panel3

    The CSS Classes attribute for the Custom Links are all set to ps2id

    Permalinks setting is set to “Plain”

    Thank you for any guidance you may be able to provide.

    Reply
    • malihu
      Posted on April 4, 2022 at 00:30 Permalink

      Hi,

      Check if the trailing slash (/) is needed or not, e.g. change your link URL to:

      http://localhost:8888/threeRivers#panel3

      and test the page.

      Reply
      • [email protected]
        Posted on April 4, 2022 at 04:32 Permalink

        Good day Mahilu,

        Thank you for replying.
        I removed the trailing slash, it behaves the same.

        Reply
        • malihu
          Posted on April 4, 2022 at 05:20 Permalink

          Make sure your link’s URL is exactly the same with the URL you see in browser’s address bar after you’ve clicked it and the page has fully re-loaded.

          The link’s URL should be exactly the same with the one you see in the browser.

          Reply
          • Laura
            Posted on April 4, 2022 at 19:58 Permalink

            Good day Malihu,
            Thank you for your reply.

            Since I’m developing locally, this is the URL in the browser’s address bar.
            http://localhost:8888/threeRivers/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2FthreeRivers%2F

            It doesn’t change with the selection of the different menu items.

          • Laura
            Posted on April 4, 2022 at 21:16 Permalink

            Update:
            It behaves as expected when I close the WP customize panel.
            It scrolls to the proper section without reloading the page.

            I closed the WP customize panel as I saw the URL I sent above includes the customization window that was open.

            The URL though doesn’t change on each menu selection and scroll to that section, it is always:
            http://localhost:8888/threeRivers/

            I’m not sure if that is normal behavior for the URL or if it should be changing to add the proper section name in the URL once it lands on the chosen section.

            Nonetheless the scrolling works without page reload when Customization panel is closed.

        • malihu
          Posted on April 4, 2022 at 20:27 Permalink

          No problem 🙂

          The URL you posted is in the WordPress administration when using the customizer.
          In order to see how your page actually works, you should test it in a new browser tab with URL:

          http://localhost:8888/threeRivers/

          In other words, you should not test your links inside WordPress customizer.

          Reply
          • Laura
            Posted on April 4, 2022 at 21:56 Permalink

            Yes, lesson learned.

            I apologize for the waste of your time, but greatly appreciate your replies.

        • malihu
          Posted on April 4, 2022 at 21:40 Permalink

          It works as expected then 🙂

          The address bar URL not changing is normal plugin behavior but you can change it if you want in plugin’s settings:

          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 and test.

          Reply
          • Laura
            Posted on April 6, 2022 at 05:19 Permalink

            Excellent! Thank you for the direction. I enabled that setting, the change occurs now.

            Thank you again,

        • malihu
          Posted on April 4, 2022 at 22:53 Permalink

          No problem. I’m happy to help 🙂

          Reply
  5. Claire
    Posted on April 1, 2022 at 18:43 Permalink

    Hi, thank you for your plugin et all your work !

    My site (still in development) : https://www.wildbac.ma.fr/
    (password : terrepromise)
    I have one menu with 5 anchor links on the home page (“Accueil”). And then 4 pages.
    I’am working with Divi.

    The plugin seems to work well on desktop. Scroll to sections, links between pages and anchors, items highlighted in the menu and on scroll…. everything is ok on desktop.
    I used .mPS2id-highlight class to style anchor items with just a red color.

    #top-menu .menu-item-object-custom .mPS2id-highlight { color: #7a132c !important; }

    Problem is on mobile : anchor links work well, scroll is ok. But anchor links don’t get .mPS2id-highlight class. And no class such as”current-item” (only for “accueil”). I don’t know why the menu behaves differently on mobile and why there is no mPS2id-highlight class.

    I currently removed any css to try to style those anchors on mobile.

    I hope my explanations are clear. Sorry for my bad english. I appreciate any help you can offer.

    Reply
    • malihu
      Posted on April 1, 2022 at 20:00 Permalink

      Hi,

      Disable “Allow only one highlighted element at a time” option in plugin settings. This is causing the issue. Uncheck the option, save changes and test. It should be working 😉

      Reply
      • Claire
        Posted on April 2, 2022 at 20:14 Permalink

        Hi, sorry but it doesn’t work : no mPS2id-highlight class on mobile…. any other idea ?

        Reply
        • malihu
          Posted on April 2, 2022 at 22:39 Permalink

          No, it does work. It’s just that the css selector you added is only for the desktop menu. Your mobile menu id is mobile_menu, so you need to add to your css:

          #mobile_menu .menu-item .mPS2id-highlight { color: #7a132c !important; }

          Let me know if it works 🙂

          Reply
        • malihu
          Posted on April 2, 2022 at 22:44 Permalink

          You also better use .menu-item instead of .menu-item-object-custom in the css

          Reply
          • Claire
            Posted on April 3, 2022 at 19:31 Permalink

            Thank you very much, it works ! (much better with some css 😉 )
            Your help is invaluable. Rarely have I seen such efficient and generous plugin support.

            It’s not a big problem but do you know if there is a way to avoid having “Accueil” and a anchor item highlighted at the same time ?

          • Claire
            Posted on April 3, 2022 at 20:18 Permalink

            Thank you very much, it works ! (much better with some css 😉 )
Your help is invaluable. Rarely have I seen such efficient and generous plugin support.
            It’s not a big problem but do you know if there is a way to avoid having “Accueil” and a anchor item highlighted at the same time ?

        • malihu
          Posted on April 3, 2022 at 19:55 Permalink

          You’re welcome 🙂

          You need to overwrite your theme’s css for the Accueil highlighting. Add this to your css:

          #top-menu li.current-menu-item.menu-item-4260 > a{ color: #66768c !important; }

          Reply
        • malihu
          Posted on April 4, 2022 at 00:23 Permalink

          Ah! I just checked your page again, change the CSS to:

          #top-menu li.current-menu-item.menu-item-4260 > a, .et-fixed-header #top-menu li.current-menu-item.menu-item-4260 > a { color: #66768c !important; }

          Reply
          • Claire
            Posted on April 4, 2022 at 09:36 Permalink

            Perfect, thank you so much !
            Now, i’m gonna play with the offset setting …. 😉
            Have a good day !

  6. franc
    Posted on March 10, 2022 at 22:52 Permalink

    Hi,

    Is it possible to put an opacity layer on the preloader ? I would like to change that opacity to be a full color, so the prealoader hides my content while the page gets loaded and dissappear once the page it’s fully loaded.

    Reply
    • malihu
      Posted on March 11, 2022 at 01:46 Permalink

      Hi,

      This page is for “page scroll to id” plugin, so I’m not sure how your request is related to the plugin(?)

      Reply
  7. FilipeOS
    Posted on February 18, 2022 at 12:06 Permalink

    Hi Malihu, I’m doing this site and like you can see it’s already scrolling horizontally but I tried 12012 different ways to link header menu to sections but it’s not working at all… Since I use your plugin on another site I installed and selected the Horizontal option but nothing happens at all… can you please advise?

    Settings: https://i.ibb.co/CP3mtZg/download.jpg
    Site: shorturl.at/bjwyH

    Thank you!

    Reply
  8. Ben
    Posted on February 3, 2022 at 22:04 Permalink

    Hi, why are these info boxes not displaying equally spaced?

    even the duplicated row below that i then tweaked the copy is wonky?

    thanks

    ben

    Reply
    • malihu
      Posted on February 3, 2022 at 23:42 Permalink

      Hi,

      Not sure I understand but this question seems out of plugin’s scope(?) This page is about “Page scroll to id” WordPress plugin.

      Reply
  9. Luvi
    Posted on January 10, 2022 at 23:28 Permalink

    Hi,

    I cannot understand why, but everytime I click on one of the two link in the menu that are supposed to scroll (the first two), it re-loads the page before scrolling.

    Also I cannot find a way to have only one highlighted only when on the section.

    The page I’m talking about is here: casalovett.com/home

    Let me know if you need more info.

    And, by the way, thank you so much for all the work you’ve done and you’re doing in helping people with the plugin!

    Reply
    • malihu
      Posted on January 11, 2022 at 04:57 Permalink

      Hello,

      Your site uses https and redirects all non-SSL requests (http) to https.

      Your links URL are all http, that’s why the page “reloads”.

      You simply need to change your links to use https. For example, change your “Chi Siamo” link URL from:

      http://casalovett.com/home/#chisiamo

      to:

      https://casalovett.com/home/#chisiamo

      or:

      /home/#chisiamo

      and it’ll work.

      Also, the highlight you see comes from your theme (WordPress themes usually highlight same-page links). You can reset/change this by adding the following to your custom/additional CSS:

      .ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .menu-link._mPS2id-h:not(:hover):not(.mPS2id-highlight){ color: inherit; }

      These should do the trick 😉
      Let me know

      Reply
      • Luvi
        Posted on January 11, 2022 at 15:03 Permalink

        Thank you so so much, it’s all solved!

        Damn, I was going crazy with the page-reloading issue and it was very simple in the end.

        Reply
        • malihu
          Posted on January 11, 2022 at 19:50 Permalink

          Awesome! Glad I helped 🙂

          Reply
  10. Frank
    Posted on January 4, 2022 at 17:47 Permalink

    hi with the latest version of divi scroll to id stopped working in horizontal but still work in vertical scroll.
    Can you help please

    Reply
    • malihu
      Posted on January 4, 2022 at 20:01 Permalink

      Hi,

      I just checked your page and both vertical and horizontal work. Did you fix the issue or?

      Reply
  11. Sam
    Posted on December 17, 2021 at 19:22 Permalink

    Hi, I am using DIVI builder and it doesn’t seem to want to play nice with offset. I have tried using the shortcodes and some of the other solutions you have supplied in the past but it’s still not working and scrolling past the element.

    Any assistance would be much appreciated.

    Reply
    • malihu
      Posted on December 18, 2021 at 02:51 Permalink

      Hello,

      There’s another script in DIVI theme preventing “Page scroll to id” from doing its thing.

      Try this:

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. You can also add the following value to “Prevent other scripts from handling plugin’s links selector(s)” option field:

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

      Save changes, test and let me know 🙂

      Reply
  12. Andrew
    Posted on November 17, 2021 at 20:37 Permalink

    Hello,

    Can somebody tell me how can I disable the table of contents on the top of the page I used Cool Timeline plugin please?

    thank you in advance

    Reply
    • malihu
      Posted on November 17, 2021 at 21:31 Permalink

      Hi,

      I’m not sure what you’re asking is within plugin’s scope(?)
      This said, if you can post your page/site URL I might be able to check what happens and help.

      Reply
  13. Sodga
    Posted on November 16, 2021 at 19:44 Permalink

    Im am trying to make a delayed auto scroll on page load. U have provided the code before:

    (function($){
    $(window).on(“load”,function(){
    $.mPageScroll2id(“scrollTo”,”#id”);
    });
    })(jQuery);

    What I am trying to do is set the autoscroll to only 3 different pages. Could you provide simple steps to follow to achieve this goal and basically disable the plugin everywhere else? Also time delay code for this would be much appreciated also, since I do not have any knowledge you can say in this.
    If my goal is simple, maybe its achievable without the plugin, and you can guide me that way also 🙂

    Reply
    • malihu
      Posted on November 16, 2021 at 20:52 Permalink

      Hello,

      You can effectively disable the plugin just by using a value like .nothing in “Selector(s)” option in plugin settings.

      You can then add the auto-scroll script only in the templates you want using PHP WordPress conditions or by using a javascript condition that checks for specific class(es). If I could see your page I’d be able to provide some code.

      To delay auto-scroll on page load, you can use a simple timeout like this:

      (function($){ $(window).on("load",function(){ var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#id"); },$delay); }); })(jQuery);

      Reply
      • Sodga
        Posted on November 17, 2021 at 10:28 Permalink

        Thank you for the delayed code!

        Absolutely! Here’s one page, which is supposed to be done like another two, which have the same layout (the first 100% screen height slide with picture and Title and after it the respective page content which I want the page to auto scroll after a short time delay)

        https://www.temporary-url.com/12E0E

        I shortened the link so it would not stay in this conversation if you don’t mind.

        Also, if it’s not too hard for you, could you give me short instructions, on where to inject the code that you will provide me, so that I would not break anything.

        P.S. at the moment the plugin is deactivated, if that changes anything.

        Reply
        • malihu
          Posted on November 17, 2021 at 15:55 Permalink

          No problem 🙂

          If your theme provides a field to add javascript code in your theme, you can place the code there. Otherwise, you can simply add the script in your theme/child-theme footer.php template, right before the closing body tag (</body>).

          If you don’t want to deal with PHP code and search for the page id value etc., you can add a javascript condition on the script:

          <script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#my-id").length) return; var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#my-id"); },$delay); }); })(jQuery); </script>

          Reply
          • Sodga
            Posted on November 17, 2021 at 18:06 Permalink

            This is awesome, everything works!!!

            Thank you very much, I wish you nothing but the best!!!

        • malihu
          Posted on November 17, 2021 at 21:29 Permalink

          You’re welcome 🙂

          Reply
  14. jen
    Posted on October 30, 2021 at 13:11 Permalink

    Hello! First: thank you for this lovely plugin!
    Secondly: I want to use two anchors in a text section, which don’t have anything to do with my ps2id-links in my menu. However, they interfer with these menu-links and mess up their styling. Is there a way to “exclude” anchor-links from the ps2id-link-behaviour?

    I hope this was understandable …
    Thanks and regards,
    Jen

    Reply
    • malihu
      Posted on October 30, 2021 at 15:50 Permalink

      You can use the selectors are excluded field to add your links selector in the list.

      This said, the styling can usually be fixed with a few CSS lines. If I could see your site/page I’d be able to help with a pure CSS solution.

      Reply
      • jen
        Posted on November 8, 2021 at 22:37 Permalink

        Thank you so much for your super quick reply! Now that you have explained, I am a littel ashamed to have overlooked the exclude-option …

        Reply
        • malihu
          Posted on November 9, 2021 at 00:40 Permalink

          Don’t be 🙂 Glad I helped.

          Reply
  15. Steve
    Posted on October 5, 2021 at 19:17 Permalink

    Is it possible to scroll a page down without user interaction, to activate a scroll on page load or shortly after?

    Reply
    • malihu
      Posted on October 5, 2021 at 23:38 Permalink

      Sure but you’ll need to add an extra js script in your page/theme template.

      For example, you can add the following script in your theme/child-theme footer.php right before the closing body tag (</body>):

      <script> (function($){ $(window).on("load",function(){ $.mPageScroll2id("scrollTo","#id"); }); })(jQuery); </script>

      and change the #id to the id you want to scroll to on page load.

      The code above is the basis and you can expand it with a delay, run on specific page(s) etc.

      Reply
  16. Jenifer
    Posted on September 24, 2021 at 22:31 Permalink

    I found your plugin to do just what I need—highlight menu items as I scroll through a long, one-page website. So thank you! I have a question about styling, though.

    My website is http://www.midtowncaboose.com/staging (Please disregard all content and colors. They are just placeholders as I figure out this styling issue.)

    I am able to change the text and/or background color of the links when I scroll by targeting .mPS2id-highlight.

    My nav is a ul, with each link as a li, which I think is pretty common. I would like to be able to style the li that contains each link when I scroll, rather than just the link itself.

    I have figured that if I give the li no padding and hidden overflow, and I display the a as block, the a fills the li container. That works great for changing the background color of that menu section.

    Is there a way to give that section a box shadow? I would love any insight you can offer. Thanks!

    Reply
    • malihu
      Posted on September 26, 2021 at 23:02 Permalink

      Hi,

      You don’t really need the li element to be overflow: hidden. You can remove it and give the link the box-shadow you want and it’ll work. Is there a reason for having the hidden overflow on the list item?

      Reply
      • Jenifer
        Posted on September 28, 2021 at 19:32 Permalink

        Nope! I was experimenting and came across the advice to do that. I’ll take it off and see if I can make it do what I want. Thanks so much for your reply!

        Reply
        • malihu
          Posted on September 29, 2021 at 00:17 Permalink

          No problem 🙂

          Reply
  17. [email protected]
    Posted on July 30, 2021 at 15:45 Permalink

    <script> (function($){ $(window).on("load",function(){ $(document).on("click",".mega-menu-link .mega-menu-item .mega-menu-item-type-custom #.mega-menu-item-1501 .mega-menu-item-object-custom ._mPS2id-h",function(){ $(".mega-menu-toggle.mega-menu-active").trigger("click"); }); }); })(jQuery); </script>

    I cannot get the mobile menu to hide when I click on contact.

    Kind regards,
    Gavin

    Reply
  18. Alan Stewart
    Posted on June 27, 2021 at 03:58 Permalink

    Hi, Malihu. I’m using your wonderful PS2ID plugin on an Elementor site but I’m having the issue that others have mentioned: the mobile menu won’t close on click. I’ve tried some of the scripts you’ve posted and they don’t seem to work. Can you help me with this? The link above is a prototype page for my one-page site, and I’ll be using the same mobile menu on additional portfolio pages.

    I appreciate any help you can offer. Let me know if you need more info.

    Reply
    • malihu
      Posted on June 27, 2021 at 05:26 Permalink

      Yes, of course I can help 🙂

      Try the following script and let me know if it works:

      <script> (function($){ $(window).on("load",function(){ $(document).on("click",".elementor-nav-menu .menu-item ._mPS2id-h",function(){ $(".elementor-menu-toggle.elementor-active").trigger("click"); }); }); })(jQuery); </script>

      Reply
      • Alan Stewart
        Posted on July 3, 2021 at 18:31 Permalink

        The script worked great. Thank you, Malihu!

        Reply
        • malihu
          Posted on July 4, 2021 at 23:35 Permalink

          You’re welcome 🙂

          Reply

Comments pages: 1 7 8 9

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