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


801 Comments

Post a comment

Comments pages: 1 7 8 9

  1. 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
  2. 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
  3. [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
  4. 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