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


821 Comments

Post a comment

Comments pages: 1 7 8 9

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. [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
  10. 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