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


27 Comments

Post a comment
  1. aidan
    Posted on April 16, 2017 at 22:58 Permalink

    First of all, thank you. Great plugin. Works awesomely:)

    I wonder if this plugin (or another one) would be able to do the following:

    I would like when my users scrolled down, on keypad or mouse, that my site would smooth scroll to my next row (container) automatically?

    I have seen some sites do this. Sorry I can’t get an example right now.

    Many thanks,

    Aidan

    Reply
  2. Muslima
    Posted on April 13, 2017 at 18:02 Permalink

    HI! THANK YOU TO THE PLUGIN
    BUT I HAVE A QUESTION…
    When you click on the menu item, it will scroll, but the pressed item doesn’t change color to the hovering color. Can you say what should I do?
    PLEASE HELP ME
    You can see my site there

    Reply
    • malihu
      Posted on April 13, 2017 at 18:19 Permalink

      Hello,

      Use plugin’s highlight class(es) in your CSS to style the link:

      #menu-main > li > a.mPS2id-highlight { /* the styling you want */ }

      Reply
      • Muslima
        Posted on April 14, 2017 at 14:03 Permalink

        I opened style.css in Editor and put this:

        #menu-main li a.mPS2id-highlight {
        background-color:#2f3392;
        color:#2f3392;
        }


        But it doesn’t work

        PLEASE HELP ME

        Reply
        • malihu
          Posted on April 14, 2017 at 18:04 Permalink

          What do you mean not working?
          It works for me (on your first 2 menu links). I see the link color changing to blue as I scroll into its section.

          Reply
  3. Sabine
    Posted on April 4, 2017 at 18:02 Permalink

    Thanks for your great plugin, it’s the only one that seems to work at all for me, except for one thing: the smooth scrolling only works once. If I click a second link from the menu, it jumps instead of scrolling. Are you able to help me with this? It’s the website in the comment URL.
    Thanks a lot!
    Sabine

    Reply
    • malihu
      Posted on April 4, 2017 at 21:16 Permalink

      Hello,

      The plugin works only on links (<a /> tags) with a valid href attribute value. Your menu is a non-link, dropdown menu (<select /> tag) which jumps to page sections via custom javascript code set by its developer.

      In order to make “Page scroll to id” work with your select menu you’d need to unbind its javascript and create a custom script which will use plugin’s scrollTo method within a jQuery change event (.change()). In short, it’d need custom js work.

      The smooth scrolling seems to be working on the first selection because it goes to a different page/URL and the plugin is able to scroll the page when it first loads as it takes the target value (#id) from the URL itself.

      Reply
      • Sabine
        Posted on April 6, 2017 at 14:03 Permalink

        Thanks a lot for your great explanation! With this information I can go on! Also a thousand thanks for being that fast!!!

        Reply
  4. Olga
    Posted on March 28, 2017 at 23:59 Permalink

    I’ve installed and activated Page Scroll To ID plugin, but 2 “scroll to id” icons aren’t showing in my editor.
    How can I fix this?

    Reply
    • malihu
      Posted on March 29, 2017 at 07:53 Permalink

      Hello,

      Do you use SiteOrigin page builder or something similar? Their widgets don’t allow custom buttons/icons in the editor.

      Maybe you can use plugin’s shortcodes or plain HTML to create your targets and/or links like described in plugin’s tutorial(?)

      Reply
  5. my
    Posted on March 27, 2017 at 11:47 Permalink

    Hi!
    Your plugin is awesome and often work without problem. But on this site that i am working on for a client seems to jump after smooth scroll. And in safari it glitches?

    Thanks for your time!

    Reply
    • malihu
      Posted on March 27, 2017 at 12:43 Permalink

      Hi,

      The site in question is the one you added in the comment URL correct?

      I checked it and the issues your having come from another script (...themes/kalium/assets/js/joinable.min.js) which handles the links and page scrolling while preventing “Page scroll to id” from doing its thing.

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. This should fix the problem(s).

      Let me know

      Reply
  6. Diyan
    Posted on March 24, 2017 at 14:38 Permalink

    Hi, I like the ease of use of this plugin.

    I wonder if there is a way to trigger a different offset value on mobile devices? Best case scenario would be: being able to set the trigger point (in px) too.

    D.

    Reply
    • Diyan
      Posted on March 24, 2017 at 14:40 Permalink

      oh my, I should have read the comments first! sry for bothering you.

      Reply
  7. Olivia
    Posted on March 21, 2017 at 03:36 Permalink

    I add the id into each page, and then create a custom link to add to the menu – and i made sure that i have “scroll to/from” different pages highlighted – and i still cannot get it to scroll smoothly throughout the website from page to page.

    Reply
    • malihu
      Posted on March 23, 2017 at 01:26 Permalink

      Please post a link with the problematic page so I can check it and help. Also make sure your links URL matches exactly the URL you see in browser’s address bar (e.g. https vs http, if www part is required etc.).

      Reply
  8. Carmen
    Posted on March 11, 2017 at 23:48 Permalink

    Hi, I´ve been using your Scroll to Id plugin for around a year and it works great, thank you!

    My only question is… I have a fixed to top navigation and I am using 90px offset which is perfect for desktop. Since I don´t have a fixed top navigation for mobile, I would like to know if I can reduce to half (45px) of the offset pixels only on mobile, maybe through a guery?
    Thanks

    Reply
    • malihu
      Posted on March 12, 2017 at 01:02 Permalink

      Hello,

      You can’t use a query for a fixed offset value (e.g. 90 pixels).

      What you can do, is use the offset expressions on a non-fixed selector-based offset value.

      These expressions restrict offset to certain conditions like only when the element is fixed, when the element is above a specific width etc.
      For example in your case, you could set the offset to be the height of your logo image but only when the top menu is sticky/fixed:

      nav.sticky:fixed .logo > img

      Insert the above value in plugin’s “Offset” (instead of 90) and test if it works in your layout.

      Reply
  9. Curtis
    Posted on March 9, 2017 at 18:38 Permalink

    The plugin is working great with just one glitch. The last item on my menu and page is Contact. It won’t highlight. Suggestions?

    Thank you!!

    Reply
    • malihu
      Posted on March 9, 2017 at 19:33 Permalink

      Hi,

      You have both “Highlight by next target” and “Allow only one highlighted element at a time” options enabled. Try disabling “Highlight by next target”.

      Reply
  10. Roman
    Posted on March 2, 2017 at 22:06 Permalink

    Hi , “Is “Enable insert link/target buttons in post visual editor” option checked?”
    there is no problem!
    On my website 4 plugin: Easy Modal ,Contact Form 7 , Page Builder, TineMCE . if they could affect the operation of your plugin?
    Tried in different modes editor button in which there is no (

    Reply
  11. Roman
    Posted on March 2, 2017 at 20:20 Permalink

    Hey, help me please. I installed your plugin “page scroll to id”, but it does not work ((no button “Insert Page scroll to id targe” in a text editor. Tell me how to fix it?

    Reply
    • malihu
      Posted on March 2, 2017 at 20:36 Permalink

      It’s impossible for me to know what happens and help without access to your site or additional info.

      Is “Enable insert link/target buttons in post visual editor” option checked?
      Do you use other plugins that may affect post/page editor toolbar?
      Is your editor switched to “text” or “visual”?
      What editor does your theme use (standard, custom etc.)?

      Reply
      • Roman
        Posted on March 2, 2017 at 22:07 Permalink

        Hi , “Is “Enable insert link/target buttons in post visual editor” option checked?”
        there is no problem!
        On my website 4 plugin: Easy Modal ,Contact Form 7 , Page Builder, TineMCE . if they could affect the operation of your plugin?
        Tried in different modes editor button in which there is no (

        Reply
        • malihu
          Posted on March 3, 2017 at 16:02 Permalink

          Ah yes. “Page builder” removes most 3rd party plugin buttons from its widget editor. That’s why you don’t see them.

          Instead of the buttons, you can use plugin’s shortcodes. The shortcodes have the same functionality as the buttons but you have to add them manually as text.

          FYI I’ll try to contact the “SiteOrigin” guys and ask them to allow “Page scroll to id” buttons in their editor.

          Reply

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