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


719 Comments

Post a comment

Comments pages: 1 6 7 8

  1. Paka
    Posted on December 1, 2020 at 23:53 Permalink

    Great plugin, but I can’t seem to get the active link to change color. Here’s my situation… I have a home page that has sections that are id with anchors that fall under a main menu called “Produce” and when I hover over the word “Produce” it opens a dropdown menu with the menu items that are anchor linked. What I’m trying to accomplish is to have the “Home” menu item to stay at the default unselected color (#388143) when someone selects one of the “Produce” subcategories. I also want the the selected link to be a slightly lighter color.

    What’s happening now is that every time I’m on the home page both the “Home” and “Produce” link colors show being active along with all the submenu items. When I select/click a submenu item nothing changes.

    I hope this makes sense! And I am using the Divi theme.

    Reply
    • jerry hinkle
      Posted on December 2, 2020 at 07:17 Permalink

      56689xxxx pin Social rank Custom system Fluxx in my Avon A bot drone 776893.42134 cxxv ardi coda
      Power tribune jh magus scroll code move off mine and ours sofia=4.23 trigun Dr Lock Aseries Ss 449870131415 rps iopium 2134 carlsbad
      0000 dos mirt mark 667893 op tank refill the blank
      Owner of idea motive Scroll up mask jerry hinkle
      Option repin hand w code risk FFl9

      Brave move ☎️ Gabs Armani Cast lo LLP to LLC

      Reply
  2. John
    Posted on November 29, 2020 at 03:00 Permalink

    Hi,
    Sorry to bother you – I’m trying to save scroll-to-id’s settings for a new WordPress site, after pressing ‘save’ I’m getting a 403 error page with url ending with ‘options.php’. Is there any way to fix this?
    Thank you!

    Reply
    • malihu
      Posted on November 29, 2020 at 18:47 Permalink

      Hi,

      I haven’t experienced this issue before. Does this happens when you save other settings (like general settings)?

      Do you have any security plugin installed? Are you getting any console errors?

      Can you make sure sure the file permissions are correct (via FTP client)?

      Let me know

      Reply
  3. Rompi
    Posted on November 26, 2020 at 21:49 Permalink

    Hi, I just install your plugin on my site : <a href="https://rompicoffeetogo.com/&quot; and it is so good.

    I have a problem. When I use “#some-id” link format it works. But when I use “https://my-site.com/#some-id” or “/#some-id” link format all of the menu are highlighted. I realized it is because of the theme stylesheet, but I can’t figure out how to solve this.
    Could you give me solution about this?

    Thank you

    Reply
    • malihu
      Posted on November 27, 2020 at 22:42 Permalink

      Hi,

      Did you solve the highlight issue? I checked your page and current menu items do not get highlighted.

      Reply
      • Rompi
        Posted on November 28, 2020 at 17:00 Permalink

        Yes, I fixed that issue by adding this, but I don’t know whether this is the right solution or not.

        a._mPS2id-h{ color: #fff !important; } a._mPS2id-h:hover { color: #cf9e23 !important; } a.mPS2id-highlight{ color: #cf9e23 !important; }

        Now I have another problem. I use Elementor. I added [ps2id id=’some-id’/] on top part of section-5. I want the fourth menu (“PAKET KEMITRAAN”) stay highlighted until section-8.
        I enabled “Keep the current element highlighted until….” and “Highlight by next target” on my plugin setting. But the link only highlighted when section-5 appear or when I am scrolling through section-6 to section-8. When I stop scrolling between section-6 and section-8, the menu is not highlighted. It begin highlighted again when I start scrolling.

        Could you help me to solve this issue?

        Reply
        • malihu
          Posted on November 28, 2020 at 21:40 Permalink

          Your solution is fine.

          I’d suggest to disable the 2 options you enabled and instead of using [ps2id id='some-id'/] to create your targets, use Elementor’s CSS ID field as described here:

          http://manos.malihu.gr/page-scroll-to-id-elementor-guide/

          Hope this helps

          Reply
          • Rompi
            Posted on November 29, 2020 at 20:59 Permalink

            I did your suggestion and added CSS ID on section-5.
            But the menu only highlighted on section-5. I want the menu stay highlighted until section-8

        • malihu
          Posted on November 29, 2020 at 22:45 Permalink

          Ok, now enable “Keep the current element highlighted until….” and see if it does what you need.

          Otherwise, if you want “Cara Gabung” section to stay highlighted until the end of the page, you need to wrap the “Cara Gabung” section along with the ones below it, with a new section with id cara-gabung-rompi

          Reply
          • Rompi
            Posted on November 30, 2020 at 12:08 Permalink

            I’m sorry, I think I didn’t explain it very well to you.
            I want “Paket Kemitraan” menu stay highlighted from “Paket Silver” section to “Paket Entreprise” section.

            I added “paket-kemitraan” on “Paket Silver” section CSS ID and enabled “Keep the current element highlighted until…” on the plugin setting and still nothing happened

        • malihu
          Posted on November 30, 2020 at 22:15 Permalink

          OK. Now, in plugin settings, set the “Highlight selector(s)” option value to:

          #menu-main-menu .menu-item a

          Save changes and test.

          Reply
  4. Danilo
    Posted on November 25, 2020 at 16:20 Permalink

    Greetings, Manolis.

    First of all thank you for providing this awesome plugin.

    However, I’ve been having a lot of trouble with highlighting just one anchor at a time. I’ve built the anchors applying anchors to each block/section in Gutenberg/Astra Pro and the scrolling is working fine.

    The highlight effect though is still applied to multiple menu items. No matter what I do it seems either the theme of the browser defaults are overriding the additional CSS:

    .memu-item a.mPS2id-highlight{ color: red; } .memu-item a.mPS2id-clicked{ color: blue; }

    Other details: selectors are a[href*=’#’]:not([href=’#’]), “Enable on WordPress Menu links” is checkeck, “Prevent other scripts from handling plugin’s links (if possible)” is checked.

    Would you kindly please help me fix it?

    Reply
    • malihu
      Posted on November 25, 2020 at 22:15 Permalink

      I can’t really help unless I see your page. Can you post your site/page url?

      Reply
      • Danilo
        Posted on November 27, 2020 at 21:37 Permalink

        OK, I’ve sent it privately.

        Reply
  5. Ian Randell
    Posted on November 25, 2020 at 14:04 Permalink

    Hi there,

    I have your plugin working perfectly on the website I am building and have used the offset to accommodate a sticky header. However, on one page I have an SVG image with links in it and I cannot get the smooth scroll to work. I am guessing it is to do with the xlink:href attribute. I tried to add this into the selectors but that didn’t work. I also tried the class ps2id but that didn’t work either.

    Is there any solution to this?

    Kind regards,

    Ian

    Reply
    • malihu
      Posted on November 25, 2020 at 22:13 Permalink

      Hello,

      The plugin requires an href attribute in order to work. This said, you can have anchor (<a />) elements (i.e. links) with href attribute inside SVG elements. For example:

      <svg width="..." height="..." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a href="#my-section-id"> <rect height="..." width="..." y="..." x="..." rx="..."/> </a> </svg>

      Hope this helps

      Reply
  6. Tim
    Posted on November 22, 2020 at 15:51 Permalink

    Hello,
    I have installed Scroll-to-ID on my website at: https://timbaggaley.com/ and it works great. I like the highlighting in the nav menu as it scrolls through my front page. I want, though, to highlight in the nav menu when on other, static pages, like the contact page, are active. I’d also like the parent page (‘notes’) to be highlighted when viewing single posts.

    I need to work within the CSS for S2ID rather than using the usual, global current-menu-item / current-menu-page mark-up to avoid confusion in the front page, yes? I can’t figure out how to highlight my contact and post parent pages. Please advise.

    Many thanks
    Tim

    Reply
    • malihu
      Posted on November 22, 2020 at 22:45 Permalink

      Hello,

      It seems that your menu links on the homepage have slightly different URLs than your menu links on the contact page. For example on the homepage, the “gallery” link has a URL of #gallery while on the contact page, it has a URL of https://timbaggaley.com#gallery.

      This means that you don’t have to avoid the global current-menu-item class, as it’s not applied in your homepage menu links.

      Try changing your highlight CSS to the following:

      .mPS2id-highlight, body:not(.home) .current-menu-item a, .single-post .menu-item a[href*='#notes']{ color: #8ba98d !important; opacity: 1; }

      The above should highlight the homepage active links, the inner pages links (e.g. contact), as well as your “notes” link when viewing single posts.

      Let me know

      Reply
  7. Miguel
    Posted on November 10, 2020 at 16:01 Permalink

    Hi, please very much help me! I want make one link-menu to go to a desired fragment intro a page.

    I have installed Page scroll to id to my wordpress but it’s not working. My link is here:

    http://herminasig.md/rca/

    could you please help me how to solve this? Thanks!

    Reply
  8. Gil
    Posted on October 26, 2020 at 14:18 Permalink

    Hey, the newest Version 1.6.9 ist compelty unusable with the Divi Theme (Divi Theme Builder isnt Loading, Images will not be loading…) so I went back to 1.6.8.

    Reply
    • malihu
      Posted on October 26, 2020 at 21:25 Permalink

      Hello,

      You probably have an old selector set in plugin settings. Go to plugin settings and set the “Selector(s)” option to:

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

      Click save changes and update plugin to latest version. Everything should work.

      Let me know

      Reply
      • Gil
        Posted on October 27, 2020 at 10:17 Permalink

        Hello,

        the selector you gave me was already set in our plugin settings. We have over 20+ sites running divi and your plugin and with the newest 1.6.9 all are completly unusable, so I had to downgrade every site now.

        Reply
        • malihu
          Posted on October 27, 2020 at 16:20 Permalink

          Was the selector exactly as I posted it, with quotes?

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

          or is it like this:

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

          I have tested 1.6.9 with DIVI and it works for me, so I need to see what’s the culprit. Is there a js console error?

          Reply
  9. Alex Vlair
    Posted on October 26, 2020 at 02:59 Permalink

    Hey there,

    What is the recommended approach to creating an offset using scroll-to-id with Menu links?

    I understand how to create an offset on links with HTML, but since Menu links aren’t directly editable with HTML in WordPress, how can I add an offset?

    Thanks!

    Reply
    • malihu
      Posted on October 26, 2020 at 13:23 Permalink

      It’s better to use your sticky header selector as the offset value. For example, in plugin settings enter the following in “Offset” option field and click save changes:

      #header.sticky

      Reply
      • Alex Vlair
        Posted on October 26, 2020 at 22:48 Permalink

        Thanks for your reply!

        I tried putting #header.sticky and #navigation-menu in the Offset field and neither of them produced any difference in the offset seen clicking on my scroll-to-id link in the Menu.

        My website is http://www.alexvlair.com, and the link is “Projects”. The page scrolls correctly to where I put the scroll-to-id anchor (the text “Projects”) but the offset is wrong and I don’t see a way to modify the offset.

        I also tried using the #ps2id-dummy-offset. I put #ps2id-dummy-offset in the Offset field and created a #ps2id-dummy-offset parameter in my CSS as instructed- but still no effect. My menu link consistently scrolls to the same spot on the page no matter what I change. (I tried emptying all caches as well).

        Perhaps it isn’t compatible with the theme I’m using? (Vavo)

        If there’s another work-around, I’d be happy to know!

        Thanks again for your time!

        Reply
        • malihu
          Posted on October 26, 2020 at 23:24 Permalink

          Please set the offset to #header.sticky and let me know so I can check it.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 05:15 Permalink

            OK I just set the Offset parameter back to #header.sticky.

            Thanks again for your help, it’s greatly appreciated!

        • malihu
          Posted on October 27, 2020 at 16:40 Permalink

          Offset is working now, meaning that content is not “hidden” by your sticky header. You also need to try this:

          Go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option. Click save changes and let me know so I can test it.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 17:40 Permalink

            Ok done! The “Prevent other scripts form handling plugin’s links” option is now enabled.

            Let me know if you see a difference on your end.

            Thanks!

        • malihu
          Posted on October 27, 2020 at 18:52 Permalink

          OK. The problem is that your theme (or another plugin) uses its own smooth scrolling function, which prevents “Page scroll to id” from doing its thing (scrolling the page, applying the offset etc.).

          I don’t know if this function comes from your theme or another plugin because you’re using cache and your js assets are minified and combined.

          Check to see if there’s an option to disable smooth scrolling on your theme or if some other plugin does it. Otherwise it’s impossible for “Page scroll to id” from handling the links and scrolling.

          Reply
          • Alex Vlair
            Posted on October 27, 2020 at 20:28 Permalink

            Ah I understand.

            Unfortunately there is no option to enable/disable Smooth Scrolling with my theme (Vavo). I’m not using any other plug-ins related to links or scrolling.

            The js assets that the theme uses are:

            jQuery by John Resig
            Isotope by David DeSandro
            Images Laoded by David DeSandro
            Easing by George Smith
            Owlcarousel by Bartosz Wojciechowski
            Fit-Vids by Chris Coyier
            jQuery vissible by Digital Fusion
            Tweenmax by Greensock
            Lightcase by Cornel Bopp Art
            Revolution Slider by Themepunch

            I’m not sure if the problem is coming from one of these? Is there anything I can do to modify them if there is no option given in the theme? (By editing the CSS, perhaps?)

            I disabled my cache and minify in case you wanted to look again.

            Let me know if you think there might still be something that can be done to solve the issue.

            Thanks for your continued support!

        • malihu
          Posted on October 28, 2020 at 14:34 Permalink

          OK. I checked your themes js files. Try this:

          Give all your menu items (appearance > menus) the css class:

          scroll-to

          Also, change their URL to include the www part. For example, change your “PROJECTS” link from:

          https://alexvlair.com/#projects

          to:

          https://www.alexvlair.com/#projects

          Let me know so I can re-check

          Reply
        • malihu
          Posted on October 28, 2020 at 14:38 Permalink

          Sorry, don’t add the scroll-to class on all menu items. Add it only on the menu items that scroll the page (like the “PROJECTS”).

          Reply
          • Alex Vlair
            Posted on October 28, 2020 at 16:25 Permalink

            Oh, that seemed to work…! The link now scrolls so that the menu is at the same height as the link ID. I suppose this was the intent?

            …So now, how can I add an offset…?

            I’d like it to stop about 400 pixels before the ID point (so that the menu is just above the first two images), is there a way to add this?

            It’s encouraging to see a change in any case! Thanks!

          • Alex Vlair
            Posted on October 28, 2020 at 16:39 Permalink

            Actually that created an additional issue; the “Projects” menu link no longer directs to a new page. What this means is that on every other page in the website, the link does nothing.

            On top of it, it seems with my theme I cannot create multiple menus, which means I cannot edit the menu link to be different on other pages. Only one menu bar for all the pages…

        • malihu
          Posted on October 28, 2020 at 22:55 Permalink

          No problem 🙂

          If you want a 400 pixels offset, just set the value:

          400

          in the “Offset” option field in plugin settings.

          For the other issue (the “PROJECTS” link), you’ll need to add some custom javascript to your theme/child-theme. Is this something you can do? I can send you a code to test.

          Reply
          • Alex Vlair
            Posted on October 29, 2020 at 04:20 Permalink

            Ah! Yes, sorry it seems obvious but I guess I didn’t try that.

            It works! So now the front page is working exactly as hoped, thank you very much!!

            For the other issue, I can edit the .php under Theme Options:
            “Vavo Child: Theme Functions (functions.php)”
            I assume this where I would add the javascript code?

            If you do have some code I could test I would love to try!

            Thanks again!

          • Alex Vlair
            Posted on October 29, 2020 at 04:24 Permalink

            (Just for clarity, the functionality that I would like from this menu link on every other page is to load the home page and follow the id target, which is what it was doing before (https://www.alexvlair.com/#projects)
            Thanks!!!)

        • malihu
          Posted on October 29, 2020 at 12:37 Permalink

          Add the following PHP code to your theme/child-theme functions.php:

          //malihu //fix for projects and all similar links that scroll the page function malihu_ps2id_custom_script(){ wp_register_script( 'malihu-ps2id-custom-script', '', array( 'jquery' ), '', true ); wp_enqueue_script( 'malihu-ps2id-custom-script' ); wp_add_inline_script( 'malihu-ps2id-custom-script', '(function($){ $(window).on("load",function(){ var elem=$(".menu-item.scroll-to a:not(._mPS2id-h)"); if(elem.length){ elem.each(function(){ $(this).parent(".menu-item").removeClass("scroll-to"); }); } }); })(jQuery);' ); } add_action( 'wp_enqueue_scripts', 'malihu_ps2id_custom_script'); //-----

          Let me know 😉

          Reply
          • Alex Vlair
            Posted on October 29, 2020 at 18:13 Permalink

            Amazing. It’s working perfectly now.

            Can’t thank you enough! It’s amazing that you make yourself so available to help people struggling with the plug-in like myself.
            I’m not sure how you make ends meet with this kind of business model but I’ll make sure to click the donate link at the bottom of the page, I really appreciate your time here!

            Thanks again!!

  10. Amanda
    Posted on October 12, 2020 at 15:13 Permalink

    It wont let me scroll to page ID from another page.

    What do I do to fix this problem?

    Reply
    • malihu
      Posted on October 12, 2020 at 16:42 Permalink

      Please see related FAQ:

      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-5

      If you need more help, I need to see your site/page.

      Reply
      • Amanda
        Posted on October 13, 2020 at 07:34 Permalink

        Page scroll to id works perfectly on my homepage but if i go to another page lets say portfolio, it won’t let me go to the homepage because it is a custom link where the page scroll is.

        I’m not sure how to add the full address for the ABOUT and SERVICES because it is all on the homepage..

        Thank you for quick response and hope to hear from you v soon,

        Amanda

        Reply
        • malihu
          Posted on October 13, 2020 at 11:53 Permalink

          Hello Amanda,

          Since the links are in your homepage, you can simply use the root-relative URL, by adding a slash in the beginning of the URL. For example, change your “SERVICES” URL to:

          /#services

          and your “ABOUT” to:

          /#about

          That’s easier than using the full URL, like https://aegraphix.com.au/#services.

          You can find more info about URLs here:

          https://yodaconditions.net/blog/html-url-types.html

          Reply
          • Amanda
            Posted on October 13, 2020 at 12:27 Permalink

            Thank you so much! it works now!

  11. Florian Hofmann
    Posted on October 8, 2020 at 14:56 Permalink

    Hello, I love this Plugin and I guess it safes my project :-).

    I have the problem that more than one item is highlighted after scrolling. But only ONE should be highlighted, see this video please:

    https://www.loom.com/share/6918af3251ba466d985e051c519ad689

    Activated is “Allow only one highlighted element at a time” and “Highlight by next target” but still have multiple active.

    Any idea how to avoid to have more then one section active?

    Thank you!
    Florian

    Reply
    • malihu
      Posted on October 8, 2020 at 18:50 Permalink

      Hi,

      I think there’s a conflict between the plugin and the sticky menu. Try this:

      1. Go to plugin settings and disable “Allow only one highlighted element at a time” option.
      2. Add the following in “Highlight selector(s)” option field:

      .iksm-term__link

      Click save changes.

      3. Change your existing CSS rule to:

      .mPS2id-highlight-first{ border: 5px solid blue !important; }

      i.e. change .mPS2id-highlight to .mPS2id-highlight-first.

      Let me know if it worked

      Reply
      • Florian Hofmann
        Posted on October 15, 2020 at 12:13 Permalink

        Hello malihu, THANK YOU very much! This helps me big time! Will play around and if it is ready I will reply again. THANKS, really cool!

        Reply

Comments pages: 1 6 7 8

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