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


69 Comments

Post a comment
  1. Dan
    Posted on June 20, 2017 at 18:54 Permalink

    I love this plug in! Smooth scrolling makes my website stand out against others. I have one issue on my website, when I click on a portfolio picture on the homepage it will load the portfolio page and scroll down. That’s working perfectly! But when i’m on the portfolio page and I click on a picture it jumps down to the project instead of scrolling smoothly. I changed the links from #project_name to http://www.late4lunch.com/portfolio/project_name# and it didn’t fix the issue. I’m stumped.

    Thanks for an amazing plugin and support!
    Dan James

    Reply
    • malihu
      Posted on June 20, 2017 at 22:42 Permalink

      The “jump” happens because you need to enable the plugin on those portfolio links.
      Go to plugin settings and change the “Selector(s)” value to:
      a[rel='m_PageScroll2id'], .project-item a
      Save changes and test your links again 😉

      Adding your portfolio links selector (.project-item a) to “Selector(s)” field, tells “Page scroll to id” that it should handle those links.

      FYI: The plugin is designed for absolute control rather than simple convenience. Its default option values are set so that there’s zero chance of it breaking or messing with other plugins or theme functionality. It will handle navigation menu links out-of-the-box but for other (existing) links (i.e. links not created by the plugin itself) you need to explicitly instruct it to handle them.

      Reply
      • Dan
        Posted on June 21, 2017 at 15:34 Permalink

        Malihu, that worked perfectly! Thanks a ton for the quick response!

        Reply
  2. Nata
    Posted on June 18, 2017 at 13:50 Permalink

    Hi there,
    I love this plugin, thanks! Just trying to solve one simple issue, similar to Jeremy’s question above (Page scroll to id keeps reloading and scrolling from the top of the page and I want to scroll from the element I’m on…)
    I initially had just Ids in the custom links (#work) and it work perfectly on the home page but they were not working from other pages on the site.
    Now if I enter the full URLS (http://nataliapelaez.com/#contact) the links work perfectly from other pages but reload on the home page and scroll from the top instead of from the element I’m on .
    I tried to solution you said, removing the www but nothing seemed to change.
    Any ideas how I can fix this?
    Thanks so much for your help!

    Reply
    • malihu
      Posted on June 18, 2017 at 22:17 Permalink

      Easy to fix 😉

      This happens because your web server is configured to always use the www subdomain. So when you go to http://nataliapelaez.com/#contact it redirects to http://www.nataliapelaez.com/#contact.
      For browsers and programs these are 2 different URL and that’s why the page reloads.

      Just change your links URL to include the .www part. For example, change “Contact” link URL from:
      http://nataliapelaez.com/#contact
      to:
      http://www.nataliapelaez.com/#contact
      and everything will work as expected.

      PS. Nice logo by the way 🙂

      Reply
      • Natalia Pelaez
        Posted on June 19, 2017 at 03:13 Permalink

        Brilliant!!!! Thanks so much it worked 🙂

        Reply
  3. Paul
    Posted on June 12, 2017 at 20:04 Permalink

    Hi,

    The plugin works perfect on safari, but i have a problem with firefox and chrome. “Lokalizacja” and “Kontakt” in main menu are linked with /#id. On home page its works normal, but when i on “o firmie” page, and clicked “lokalizacja” in menu, there is a bug – menu and revolution slider dissapears. The problem only occurs on chrome and firefox.

    My site http://kd.mooka.pl

    Reply
    • malihu
      Posted on June 12, 2017 at 20:26 Permalink

      Hello,

      I think the issue might be a theme function which conflicts with “Page scroll to id”. Try adding a small delay for scrolling to target on page load:

      Go to “Page scroll to id” settings and scroll to “Links behavior” section.
      Change “milliseconds delay for scrolling to target on page load” option to 300
      Save changes and check if the issue is fixed.

      Reply
      • Paul
        Posted on June 12, 2017 at 20:48 Permalink

        Thanks for fast reply. I’ve changed, but not working.

        Reply
        • malihu
          Posted on June 12, 2017 at 21:02 Permalink

          If it’s not working then the problem must be coming from the theme itself (not from “Page scroll to id”).
          You can test this by temporarily deactivating “Page scroll to id” and test your links. If this issue still happens, then the problem is with the theme.

          Reply
          • Paul
            Posted on June 12, 2017 at 21:23 Permalink

            When i deactivated plugin i can’t move from menu to specific target on page but the links works normal. On safari everything works perfect with plugin…

        • malihu
          Posted on June 13, 2017 at 00:56 Permalink

          Go to plugin settings and disable (uncheck) the following options:
          Scroll from/to different pages
          Enable different pages scrolling on all links
          Check if the problem remains.

          Reply
          • Paul
            Posted on June 13, 2017 at 12:13 Permalink

            When i uncheck this options the same problem occurred this time on safari.

        • malihu
          Posted on June 13, 2017 at 17:41 Permalink

          The issue must be with your theme (or some other plugin?). I just tested (on Chrome) going to a target that’s not handled by any link and the same issue happens.

          Go to the following URL:
          http://kd.mooka.pl/#footer
          and you’ll see that the content, slider etc. disappear.

          The #footer target is not related to “Page scroll to id” and it’s not related by a link handled by the plugin. Still, it produces the same problem.

          This means that the issue has something to do with the theme itself (maybe the way it preloads the page?). You should probably contact the theme developer(s) about it.

          If you want, do the above test with and without “Page scroll to id”:

          1. Temporarily deactivate “Page scroll to id”
          2. Open a new browser tab and go to http://kd.mooka.pl/#footer
          3. See if content, slider etc. disappear

          Reply
  4. Eren
    Posted on June 11, 2017 at 16:32 Permalink

    hi,

    thank for this plug-in, it works well but I have one problem.

    When I click related menu item second time, page disappear. How can I fix this issue?

    thanks in advance.

    Reply
  5. Henri
    Posted on June 11, 2017 at 15:39 Permalink

    Hi!

    I’m having a difficulties with scroll to id plugin. As I use it to scroll trough my music lyrics then it’s been very handful and great, but now it is not working correctly.

    Problem is that when ever try to load the page kohvipaus.eu/luurika , then it does not make the links active, but when I scroll down a bit with mouse then links on the navigation get active. I don’t know what is wrong. If you could tell me it would be awesome! So problem is that I want to get it working from the moment I load the page to select song for example “soojusest” and it scrolls to it. But as for now it does it only when I manually scroll down a little bit and then I can click it and it starts to scroll.

    Thanks,
    Henri

    Reply
    • malihu
      Posted on June 11, 2017 at 19:27 Permalink

      Hi,

      I just checked your link and cannot scroll or interact with it (no scrollbar at all)?

      Reply
  6. Hindiarcha
    Posted on June 7, 2017 at 10:18 Permalink

    Hi malihu, I have searched over wordpress plugin page but did not find a suitable plugin for auto scroll, can you please suggest me one for my news website

    Reply
  7. Jeremy
    Posted on June 7, 2017 at 01:42 Permalink

    Page scroll to id keeps reloading and scrolling from the top of the page and I want to scroll from the element I’m on…If I’m on panel 2 it reloads…shows the top of the page then scrolls all the way down through all the sections that have already been shown…any advice would be greatly appreciated!

    Reply
    • malihu
      Posted on June 7, 2017 at 02:08 Permalink

      Just remove the www. part from your links URL. For example, change “Our Services” URL from:
      http://www.aeonweddings.com/#panel1
      to:
      http://aeonweddings.com/#panel1

      The reloading happens because your web server is configured to always redirect to the domain (aeonweddings.com) without the www subdomain.
      For the browser, site.com/page and www.site.com/page are 2 different URL.

      Reply
  8. Rob
    Posted on June 1, 2017 at 06:21 Permalink

    Hi there,

    I have installed the default 2017 wordpress theme and starting from scratch. I’ve installed your plugin and it works great. Thank you for this!

    What I’m interested in is the ability to have a down arrow icon over the lower right of the initial image, to let users know they can either click that or scroll down. Does your plugin have this ability to have an arrow on the bottom right of the default page?

    Thanks so much, it works really well. Rob

    Reply
    • malihu
      Posted on June 1, 2017 at 14:02 Permalink

      Not really. The design of elements (i.e. arrow links) is out of plugin’s scope. “Page scroll to id” handles the smooth scrolling functionality and creates only targets and plain links that you can style via CSS.

      Reply
  9. Domenico
    Posted on May 17, 2017 at 17:55 Permalink

    Hello, first of all, thank you for the plug in.
    I would ask for a question.
    It would be possible to make a trasparent link on the image as in my home page?

    For example a text as “about us”?

    Reply
  10. Nidhi Mangal
    Posted on May 15, 2017 at 04:06 Permalink

    Hi there,

    I am using your plugin on this site http://www.thebalancesheet.com.au/ to scroll the page smoothly to the link’s target within a page.

    The plugin is working good if the url with /#some-id only when entered manually in the url. However, on click the menu is not scrolling the page smoothly. I read the question in the FAQS “How to make the plugin work with WordPress Menu links?” and did exactly what you mentioned there. But that’s not working either. Can you suggestion what I am doing wrong?

    Many Thanks
    Nidhi Mangal

    Reply
    • malihu
      Posted on May 15, 2017 at 15:13 Permalink

      Hi,

      I just checked your link and scrolling works as expected. Did you fix it or need more help?

      Reply
  11. Theo
    Posted on May 6, 2017 at 22:05 Permalink

    Hello! First of all: very useful plugin, thanks!

    I have a fixed menu on the top and i want to use a 100px offset, but it doesn’t work!
    Defining a selector doesn’t work also =/

    Could you help me?

    Thanks!

    Reply
    • malihu
      Posted on May 7, 2017 at 21:39 Permalink

      I can’t really help unless I see your page/site.
      Your theme might be using its own way of scrolling in-page links. If you can post your link I’d be happy to help.

      Reply
      • Theo
        Posted on May 11, 2017 at 00:27 Permalink

        Thanks, Malihu!

        This is my devlopment link: http://tandainterativa.com.br/~aespecialistacom/

        I set the offset to “-500” in the plugin’s config page.

        Reply
        • malihu
          Posted on May 11, 2017 at 01:38 Permalink

          It seems that the plugin is not enabled on your menu links. This is probably because your theme has its own custom walker function for the menu which prevents “Enable on WordPress Menu links” option from working.

          The quickest way to fix this is go to plugin settings and enter your menu links selector in “Selector(s)” field:
          a[rel='m_PageScroll2id'], .menu-item a

          Alternately, you can add plugin’s class to your menu links:
          http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#menu-links-alt-section

          Let me know

          Reply
          • Theo
            Posted on May 11, 2017 at 03:19 Permalink

            Setting the selector as “a[rel=’m_PageScroll2id’], .menu-item a” worked!

            Thanks a lot, Malihu!!

        • malihu
          Posted on May 11, 2017 at 04:18 Permalink

          Awesome. Glad I helped 🙂

          Reply
          • Théo
            Posted on May 13, 2017 at 04:27 Permalink

            Actually that didn’t worked! =(

            Each web browser is stopping the scroll in one different position hahaha

            Guess what’s causing this?

            Thanks again!

        • malihu
          Posted on May 13, 2017 at 09:08 Permalink

          In plugin settings, try enabling “Prevent other scripts from handling plugin’s links” option and test/check again.

          Reply
          • Theo
            Posted on May 18, 2017 at 01:15 Permalink

            Thanks again, that worked!

            But for some reason OPERA is the only one that’s still bugging.

  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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