This website uses cookies to personalise ads and to analyse traffic ok
web design

Page scroll to id for WordPress tutorial

Basic tutorial for using “Page scroll to id” WordPress plugin on your WordPress site.

In order to use the plugin on your WordPress site (after installing and activating it), you need to do the following:

  1. Create id targets the page will scroll to or find existing id attributes in your theme to use with your links.
  2. Create links that point to those targets or enable the plugin on links that already exist in your site.

Creating id targets

Creating id targets in post visual editor

tinymce-custom-btn-ps2id-target In post visual editor, click the toolbar button “Insert Page scroll to id target” to create a target at the cursor position in the editor.

page-scroll-to-id-target-modal In “Page scroll to id target” modal insert the id value you want (e.g. some-id) and click “OK”. The target shortcode (e.g. [ps2id id='some-id' target=''/]) will appear in the editor. Update/save the post/page. You can now use this id value in your link(s) URL (e.g. #some-id).

Creating id targets in post editor via shortcodes

In post visual or text editor, enter [ps2id id='some-id'/] in the place you want to create the target and set the id attribute to the value you want. This will create a simple anchor-point target. If you want to wrap your content (or part of your content) in a target id (same as adding an id attribute to some content), use the [ps2id_wrap] shortcode:

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

Update/save the post/page so you can use this target value in your link(s) URL (e.g. #some-id).

Click here for more info on target shortcodes

Creating id targets in HTML

Wrap your content in a div with an id attribute (recommended for better link highlighting) or add simple anchor points (with id attributes) before each content section. Examples:

<div id="section-1">
  <p>Section 1 content...</p>
</div>

<div id="section-2">
  <p>Section 2 content...</p>
</div>

<div id="section-3">
  <p>Section 3 content...</p>
</div>
<a id="section-1"></a>
<p>Section 1 content...</p>

<a id="section-2"></a>
<p>Section 2 content...</p>

<a id="section-3"></a>
<p>Section 3 content...</p>

Creating id targets in WordPress widget areas

Create targets in your widget areas (Appearance → Widgets) via plugin’s “Page scroll to id target” widget.
Keep in mind that all WordPress widgets have existing id values that you can use with your links. You can find these id values within each active widget under “Page scroll to id target” label. The option to display these values is “Display widgets id attribute” which is enabled by default.

FAQ

Divi WordPress Theme

Creating links

page-scroll-to-id-target-menu The plugin is enabled by default on WordPress Menu links (Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to.

Edit your menu and add “Custom links” as these type of links allow us to enter a custom URL with the id we want. Your links URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc.

Please note that if you want your links to work from other/different pages, you’ll need to insert the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id) or the relative-root URL (e.g. /page/#some-id).

tinymce-custom-btn-ps2id-link In post visual editor, click the toolbar button “Insert/edit Page scroll to id link” to create a link at the cursor position in the editor or from text you’ve already selected.

page-scroll-to-id-link-modal In “Page scroll to id link” modal insert the link’s URL and text. The URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc. When ready, click “OK” and the link will appear in the editor. You can edit the link via both “Insert/edit link” and “Insert/edit Page scroll to id link” buttons, as well as inline.

“Page scroll to id link” modal provides additional options like “Offset” and “Custom class(es)” that can be used to change link’s offset, its scroll duration/speed etc.

In post visual or text editor, enter [ps2id url='#some-id']link text[/ps2id] in the place you want to create the link and set the url attribute and link’s text to the values you want. The shortcode provides the same options as plugin’s “Insert/edit Page scroll to id link” toolbar button via attributes.

Any link with ps2id class or m_PageScroll2id rel attribute value will be handled by the plugin. For example:

<a href="#some-id" class="ps2id">link text</a>
<a href="#another-id" rel="m_PageScroll2id">link text</a>

You can instruct “Page scroll to id” to handle any link in your page(s) by using the “Selector(s)” field in plugin settings.
If you need to enable “Page scroll to id” on all links with URL containing a hash (#), insert the following value in “Selector(s)” field:
a[href*=#]:not([href=#])

Click here for more info on “Selector(s)”

FAQ

Links highlighting

Each time a target element is visible on the screen (i.e. is within the viewport), the plugin adds the mPS2id-highlight class to its associated link or links (i.e. the links that scroll to this target). You can use this class in your theme’s stylesheet or custom CSS to style the current/active link(s), e.g.
a.mPS2id-highlight{ background: #ff0; }

Common case scenario and example

Lets say you have a sticky menu containing links that scroll to various targets/sections within the page. Your links text color is black (which may be set by your theme or some other stylesheet):

.memu-item a{ 
    color: black; 
}

When scrolling through page sections (i.e. targets) you want the link of the visible/current target to become red. You can do this by adding the following CSS:

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

Notes and more info

The default highlight classes for the links are: mPS2id-highlight, mPS2id-highlight-first and mPS2id-highlight-last (you can change these class-names in plugin’s settings if you want).

For more information about the highlight classes and options see “Classes & highlight options”, “Highlight selector(s)” and FAQ below.

FAQ

Offset scrolling for sticky menus

If your page has a top sticky/fixed-positioned menu, you’ll probably need to use plugin’s “Offset” option in order to prevent the menu from overlapping your content. This option allows us to shift (i.e. offset) scrolling, so in the case of a top sticky menu, we usually need to “stop” scrolling a few pixels before the target reaches the top of the page (to accommodate for the space the sticky menu occupies).

Go to Settings → Page scroll to id → Offset and insert an offset amount equal to your sticky menu height (in pixels). You can insert its height value as a number (e.g. 100) or you can insert your menu selector (e.g. #my-sticky-menu), so the plugin calculates its height automatically.

The plugin provides special selector expressions in order to define advanced offsets and work with responsive menus. For more info see “Offset” option.

Scrolling from/to different pages

The plugin has the option to scroll from/to different pages enabled by default. This means that when you click a link which points to a target id on another page, you’ll still get the smooth scrolling effect which will happen immediately after that page is fully loaded.

The only thing you’ll need is to make sure your links have the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id).

Video tutorial


537 Comments

Post a comment

Comments pages: 1 2 3 4 5 6

  1. Alan
    Posted on December 5, 2016 at 12:59 Permalink

    Hi malihu,
    I regret having to ask this, because I suspect the answer is something ridiculously simple. But I just can’t get the plug-in to work. I’m using a Divi theme with WordPress, and my custom links work just fine. However, I’m not getting the animations, offset, or highlighting from the plug-in. It seems to be installed properly, and I can see the HTML code generated by it. I’ve tried using the standard selectors and also created custom selectors, but nothing seems to get it to work. My guess was that the JS was being overridden somehow, although I have deleted all other plug-ins and have almost no custom coding (it’s a very simple site). Any clues?

    Reply
    • malihu
      Posted on December 5, 2016 at 20:05 Permalink

      Hello Alan,

      You are correct. The JS is indeed overridden by this script:
      ...themes/Divi/js/custom.js

      This means that your links are handled by the script above which prevents “Page scroll to id” from working (along with most of its functions, like offset).

      The function in the custom.js which does this, is from line 746 to 770.

      Check if there’s an option in the theme to disable this “smooth scroll” functionality or remove/comment-out these lines of code manually. Doing this, everything should work.

      Let me know

      Reply
      • Alan
        Posted on January 1, 2017 at 20:18 Permalink

        Sorry for the late reply. I was looking for this post in the wrong comments section. : ) Anyway, yes, both your solution and the plug-in are working great! Thanks very much!

        Reply
  2. Nate Steuer
    Posted on November 23, 2016 at 02:51 Permalink

    Simple question (I hope). I am trying to get the “FIND A CHURCH” red button, to scroll down to the “CHURCHES” section when pressed. I downloaded the Page scoll to ID plugin thinking it would be easy….HA HA. I need help! Thanks!

    Reply
    • malihu
      Posted on November 23, 2016 at 15:46 Permalink

      Hi,

      Your link’s URL currently points to #latestnews-id but there’s no target element with such id (latestnews-id).

      You either need to create the target element (see Creating the target sections section) or change you link’s URL to an existing id within your document.
      I inspected your page via browser’s developer tools and it seems that the section you want to scroll to has already the id latestnews-id, so you can simply change the “Find a church” link URL to http://www.repentbelize.com/#team.

      You should also enable the plugin on your “Find a church” link. You can do this by giving it the class ps2id. If you can’t give a class to your links, you can easily enable it by adding its selector in “Selector(s)” field in plugin settings:

      Go to “Page scroll to id” settings, change the “Selector(s)” field value to:
      a[rel='m_PageScroll2id'], a.btn[href*='#']
      and hit “Save Changes”.

      FYI:
      Your theme seems to have an internal mechanism for scrolling same page links, so if for some reason you need to disable it, you have to remove the function in line 162 of ...themes/zerif-lite/js/zerif.js.

      Reply
      • Nate Steuer
        Posted on November 23, 2016 at 20:25 Permalink

        THANK YOU!
        THANK YOU!
        THANK YOU!

        Reply
        • malihu
          Posted on November 23, 2016 at 20:39 Permalink

          You’re welcome!

          Reply
        • Nate Steuer
          Posted on November 24, 2016 at 14:18 Permalink

          Another question, how do I remove the “This site is under development” statement that shows when site is shared with others?

          THANKS!
          Happy Thanksgiving!

          Reply
          • malihu
            Posted on November 24, 2016 at 15:29 Permalink

            I can’t really say but you may need to re-configure your site server as it says “connection not secure” when trying to access it. This happens because your site is using https and there must be an issue with the certificate. You should contact your web hosting support and/or site developer.

  3. ShowArt
    Posted on November 22, 2016 at 20:36 Permalink

    Hi, I’m trying to figure out why the page jumps on my top nav items, whereas the footer nav items work fine. Can you please help?

    Please take a look at my site at: https://showart.gooddogpress.com/

    Thank you!

    Reply
    • malihu
      Posted on November 22, 2016 at 21:50 Permalink

      Hello,

      Just checked your page and there’s another script which handles your menu links.
      The script is in index on line 577:

      jQuery( document ).ready( function( $ ){ if ( $( window ).width() >= 767 ){ $( '.navbar-nav > li.menu-item > a' ).click( function(){ if( $( this ).attr('target') !== '_blank' ){ window.location = $( this ).attr( 'href' ); }else{ var win = window.open($( this ).attr( 'href' ), '_blank'); win.focus(); } }); } });

      I don’t know if this is added by the theme or some other plugin and I’m not sure why it’s added. As you can see, the code applies when viewport width is grater than 768 pixels, that’s why the menu links scroll the page smoothly on mobile menu.

      I can’t really see a reason for the script as it seems to do what HTML links do natively.

      If you remove (or comment-out) the script above, your menu links will smoothly scroll the page as they’ll be handled by “Page scroll to id”.

      Hope this helps

      Reply
      • ShowArt
        Posted on November 22, 2016 at 23:26 Permalink

        Thanks so much! I had to dig a little into my parent theme file, but I was able to remove that offending jQuery (from Bootstrap on Colorlib’s Sparkling theme) by adding this to my functions.php:

        function child_remove_parent_function() { remove_action( 'wp_footer', 'sparkling_make_top_level_menu_clickable', 1); } add_action( 'wp_loaded', 'child_remove_parent_function' );

        Reply
        • malihu
          Posted on November 23, 2016 at 15:18 Permalink

          Nice. You applied the proper/best solution 😉

          Reply
  4. Ariel
    Posted on November 18, 2016 at 18:17 Permalink

    Hi there, I’m not getting it to work. I have an icon pointing down and I need it to scroll to a section beneath it. Please help.

    This is the site: http://www.ikydstudio.com/DavidStoltzB

    -Ariel

    Reply
    • malihu
      Posted on November 19, 2016 at 05:14 Permalink

      Hi,

      I’m not sure how to help. You don’t have the plugin installed/activated on your site(?)

      Reply
      • Uchechukwu Ajalam
        Posted on November 20, 2016 at 19:51 Permalink

        Hey, Malihu

        I’m not much of a programmer, but I really love your plugin. I’ve gotten it to work with a few menus, but I want to get it to work for a contact form.

        And when I click on a menu, it scrolls past the title, and I can’t get it to offset.

        Can you help me, please?

        Reply
        • malihu
          Posted on November 20, 2016 at 20:28 Permalink

          Hi,

          If you change your “contact us” menu link URL to #contact-us it seems to scroll to the correct position(?)

          Also, your theme has another script which handles page scrolling. The function is in scripts.js on line 20. This function is called in line 131 of the same file, so if you comment/remove it, your links should be handled by “Page scroll to id”.

          Hope this helps

          Reply
          • Uchechukwu Ajalam
            Posted on November 22, 2016 at 17:13 Permalink

            How do I remove that line, please? Do I use dreamweaver, or WordPress code editor?

        • malihu
          Posted on November 22, 2016 at 17:41 Permalink

          Whichever you want. You could use wp editor (Appearance > Editor) within wp admin or a code editor (like dreamweaver) via FTP.

          Reply
  5. robbeary
    Posted on November 12, 2016 at 02:26 Permalink

    Hey, I think this plugin is great!

    I have it installed, and i’m using a theme that I didn’t make. I’m using your plugin on content in the page to link to somewhere else on the same page instead of having the link in the menu.

    It jumps instead of slowly scrolls, and i’m not quite sure what to do?
    Does this plugin work on other links that aren’t in the menu?

    This is my first time handling all this css and html so it’s a bit daunting.
    Site: http://nvergara.com/games

    Thanks!

    Reply
    • malihu
      Posted on November 12, 2016 at 07:40 Permalink

      Hello,

      The plugin works on any link. You just need to enable the plugin on your links. You can do this in many ways. For example, by giving your links the class ps2id

      If you cannot modify your link(s), you can add their selector in plugin settings.
      In “Page scroll to id” settings, change the ‘Selector(s)’ option to:
      a[rel='m_PageScroll2id'], .sow-image-container a[href*='#']

      Reply
  6. Sam
    Posted on October 31, 2016 at 20:56 Permalink

    This plugin look like it will do everything I need. I have installed as instructed for custom menu, but nothing works. Any help would be welcomed.

    Reply
    • malihu
      Posted on October 31, 2016 at 21:23 Permalink

      I just checked you site and everything works except that scrolling animation is handled by the theme.

      Your theme has an internal way of scrolling the page. The function that does this is in line 3259 of ...themes/converio/js/scripts.js (commented as // smooth scrolling).
      If you remove/comment this click function (from line 3259 to 3270), page scrolling will be handled correctly by “Page scroll to id”.

      I also noted that you’ve set the offset to 800 pixels. Not sure why you want that, since your header menu is not fixed/sticky(?)

      Reply
      • Sam
        Posted on November 1, 2016 at 10:59 Permalink

        Thanks for the quick response, I will give your comments ago.

        Regarding the 800 pixels – I was playing around with the plugin and forgot to change this.

        Many thanks

        Reply
  7. [email protected]
    Posted on October 24, 2016 at 21:12 Permalink

    Hi,

    You helped me a couple of weeks ago with my site: fellowships.davidsuzuki.org

    They have now asked for a fixed header and with that implemented – I’ve put the class of the header in the offset (id didn’t work). The scroll lands almost at the right spot on the first click and then if I click a second time, it lands exactly where it should. Is there something I can do to fine tune it so it lands where it should on the first click?

    Also, I’ve put .site-header-main:fixed into the offset, the it’s still doing it for mobile (even though that’s only set for media queries above 800px wide). Does the :fixed only work for ids?

    Thanks for any help!
    Krisztina.

    Reply
    • malihu
      Posted on October 26, 2016 at 18:09 Permalink

      Hello again,

      I’ll try to explain as best as I can 🙂

      The issue you’re having is because a)the page length changes after each accordion is opened or closed and b)because accordions have their own scrolling animation (e.g. when you click one accordion panel, it opens and scrolls the page).

      For example:
      When you click the link “Fellowships”, the page scrolls at the “correct” position because it is the first accordion.
      When you click the link “Eligibility”, the page scrolls at the “correct” position only after the second click, because “Fellowships” closed while “Eligibility” opened, changing the page length as well as the actual position of “Eligibility”.

      This is because elements position is always calculated from the top of the page to the element’s top. “Fellowships” is before “Eligibility”, so when the former is closed it changes the latter position.

      The animation that happens after an accordion is opened, is part of the accordion script/plugin and is handled entirely by it (not “Page scroll to id”).

      “Page scroll to id” handles your menu links (not the accordion panels), so the options you’ve set (e.g. offset) apply only on those links it handles. For example, if you click a link that’s not an accordion, like “About”, the page scrolls exactly where it should with the correct offset.

      The offset cannot apply on the scrolling that happens after an accordion is opened (the accordion script has its own fixed offset as far as I can see).
      So because accordion’s offset is not the same with “Page scroll to id” offset, when you click the menu link a second time it re-adjusts the scrolling position according to “Page scroll to id” offset you’ve set.

      In any case, the only fix I can see is re-adjusting scrolling position after accordion has done its scrolling but I can’t say for sure if it’ll work as we want…

      In the custom script we added previously, add the following additional code after:
      $("#panels .ttfmp-accordion-container").accordion("option","active",active);

      Additional code:
      setTimeout(function(){ $.mPageScroll2id("scrollTo",href); },500);

      and increase/decrease the 500 value accordingly.

      Sorry for the long post but the issue is a bit technical.

      Reply
    • malihu
      Posted on October 26, 2016 at 18:18 Permalink

      Also, the :fixed value in the offset does work as it should on the non-accordion links (e.g. “About”). On the accordion links (on mobile), any extra space you see above the accordion title, it’s the accordion’s script fixed offset.

      Reply
    • malihu
      Posted on October 26, 2016 at 18:23 Permalink

      One final note:
      I would be great if in the accordion script you could change its (fixed) offset to match the one from “Page scroll to id”. Maybe there is an option for this?

      Reply
  8. David
    Posted on October 23, 2016 at 00:51 Permalink

    Hello, thank you for this wonderful plugin! Unfortunately I can’t seem to get it to work. I have a single page site with several content sections and have tried adding the scroll to id link/target into my section descriptions but nothing happens when the link in the menu is clicked. Anything I’m doing wrong?

    Thanks in advance.

    Reply
    • malihu
      Posted on October 23, 2016 at 01:22 Permalink

      Hello,

      You’ve accidentally added the hash (#) in your targets id value.
      For example, “Beat Catalog” section id is currently #beat-catalog while it should be beat-catalog.

      Also, you don’t have a home target for your “Home” link. You should create one or use an existing id in your template (e.g. #top-bar).

      Let me know if this helps

      Reply
      • David
        Posted on October 23, 2016 at 02:48 Permalink

        That helped! Thank you for the speedy response and support.
        Just a couple more things that I’m not sure about, I have a pricing table with “Buy Now” buttons. Clicking those makes it snap to the section rather than scroll. Also, is there a way to make it scroll to the section title rather than the space right below it?

        Reply
        • malihu
          Posted on October 23, 2016 at 03:53 Permalink

          1. “Buy Now” buttons

          You need to enable the plugin on those links and you can do this in more than one ways. For instance, if you give the links the class ps2id, it’ll work.

          If you cannot add classes to those links, you can add their element selector in “Selector(s)” field in plugin’s settings:
          a[rel='m_PageScroll2id'], .pricing-table-button .button[href*='#']

          2. Scroll to the section title

          You can use plugin’s “Offset” option to offset scrolling position according to your titles height. So, in plugin’s settings set “Offset” value to 108 (your titles height) or any value you want.

          Another way would be to use the id attributes of existing elements within your theme. Your theme already wraps each section in elements with id in the form of content-sectionX and those sections include the titles. So you can try changing your links URL from:
          #beat-catalog, #licensing etc. to:
          #content-section2, #content-section3 etc.

          Hope this helps

          Thanks a lot for the donation 🙂

          Reply
          • David
            Posted on October 23, 2016 at 04:22 Permalink

            Awesome! Thank again, I don’t get this kind of support even for paid products 😀

            As for the donation, you are very welcome and it is more than well deserved.

  9. Cimplicity
    Posted on October 18, 2016 at 14:53 Permalink

    Awesome plugin.
    I have one question, i am using it on a one page site for a client. When you click on the menu item and it scrolls down to the targeted area, they want the url in the browser menu bar to change to reflect the target.

    For example: one of the targets is #doors, they want the url in the browser to show http://www.xxxxx.xx.xx/#doors and not the page url.

    Is this possible?

    Reply
    • malihu
      Posted on October 18, 2016 at 17:29 Permalink

      It is possible if you can add an extra js script in your theme/template. If you can, try the following:

      (function($){ $(window).load(function(){ $(document).data("mPS2id").onStart=function(){ if(window.history && window.history.pushState) history.pushState("","",$(".mPS2id-clicked").attr("href")); } }); })(jQuery);

      Add the above in a script tag in your footer.php just before the closing body tag or inside a custom javascript field if your theme provides one.

      Let me know 🙂

      Reply
  10. Goso
    Posted on October 17, 2016 at 18:19 Permalink

    I t seems I am too dumb even for such an extensive tutorial. I want to connect the portfolio item “www.name.com/portfolio/dumb” to another portfolio item “www.name.com/portfolio/smart”.

    I create an individual link, give it the dumb URL, I go to ‘Screen Options’ and check ‘Link Relationship (XFN)’, then I copy “m_PageScroll2id” into the XFN field of the individual Link I created. Am I on track still.

    Now I want to add “Smart” to the menu and I get lost. I add it and copy “m_PageScroll2id” into the field – NOTHING – I create a new individual link, give it the smart URL and of course the “m_PageScroll2id” – NADA – Then I go to your chapter “Creating the target sections” and I say -F… THAT – I am too dumb for that.

    Can you please make me feel smart again. Thank you, Goso

    Reply
    • malihu
      Posted on October 17, 2016 at 20:58 Permalink

      When you say “connect the portfolio item x to another portfolio item…” what do you mean?

      The plugin connects links with URL in the form of #id to sections with this particular id.
      The plugin does not create single-page websites or modify themes/templates. It’s just connects links with (pre-existing) content sections and helps creating them via editor buttons, shortcodes etc.

      The example links you posted (e.g. www.name.com/portfolio/dumb) are pages and do not have a hash (#).
      The way it should normally work is creating a link with URL http://www.name.com/portfolio/dumb#section-1 and in the http://www.name.com/portfolio/dumb page create a target with id section-1. This way, when a user clicks on the link, it’ll scroll the http://www.name.com/portfolio/dumb page to the section-1 position.

      Does this help?

      Reply
  11. Rúben
    Posted on October 12, 2016 at 13:31 Permalink

    Hello Malihu, thanks for this awesome explanation on the plugin !
    I installed it not for the page scrolling feature but only to achieve the highlight active links on scroll. Unfortunately I’m having a hard time on it. I can’t send you the website link because it’s on localhost at the moment but I can show you a screenshot of my sidebar code: http://imgur.com/a/6qLAA
    As you can see I have 2 id’s, #sidebar and #nav_menu-2. I tried to change the CSS on both but nothing works.

    #nav_menu-2 a.mPS2id-highlight {
    background: #3b3b3b !important;
    }

    That ID works because if I take off the .mPS2id-highlight sufix it colors all the links.

    Thank you

    Reply
    • malihu
      Posted on October 12, 2016 at 15:43 Permalink

      Hello,

      Is there an element with id feature1 in your content?

      The thing is that the plugin highlights only the links that it handles, so it must be activated on your link(s). If there’s a target with the appropriate id in your content, then it should work.

      To remove the click event from the link and not use the page scrolling feature at all, you’ll need an extra small js script (I can give you one). But first you need to make sure that the plugin works as it should (setup the targets etc.)

      Let me know

      Reply
      • Rúben
        Posted on October 12, 2016 at 16:27 Permalink

        Hi and thank you for answering.

        I’m using Themify Ultra plugin by the way.
        The element , “feature1”, is the second row of my page http://imgur.com/a/ClvI1.
        I have a single page with multiple rows. Each link in the sidebar sends me to the respective row.

        What scares me a bit is that even the “#nav_menu-2 a:active” method doesn’t work properly. It should set and keep a pre defined color on the link when I click on it and it only sets that color on the click “time frame second”. The it goes back to the default color instead of keeping it.

        I’m giving this additional info (that doesn’t include the on scroll issue) because it could be possible to have some conflicts about this “anchor pages”.

        Reply
        • malihu
          Posted on October 12, 2016 at 16:53 Permalink

          Well, you need to make sure (via browser’s dev tools) if the target elements have id attributes. There’s a chance that they use the name attribute instead of the id and the plugin won’t work with it.

          You should also check if the scrollable element (i.e. the element with the scrollbar) is the page itself (html/body tag) or an overflowed div.

          If the scrollable element is the actual page and the target elements work with id (and not name) attributes, the plugin should work.

          Reply
          • Rúben
            Posted on October 12, 2016 at 17:06 Permalink

            the module is inside of a div
            https://puu.sh/rGsqm/583ffb604c.png

            I can’t see an ID on the module row, but the module feature has one called “feature-32-1-0-1”

        • malihu
          Posted on October 13, 2016 at 15:46 Permalink

          Well then this id is the one you want to associate your link to (e.g. change your link’s URL/href to #feature-32-1-0-1

          Reply
          • Rúben
            Posted on October 14, 2016 at 17:59 Permalink

            Yea that works. The link must be the content id instead of the anchor page name. Thank you very much for your help Malihu.
            Good luck

  12. Marc
    Posted on September 30, 2016 at 09:38 Permalink

    Hi malihu!

    I installed your plugin, but it does not work, the idea is to scroll the page horizontally.

    Website: http://utveckling.afoto.se/

    What im doing wrong? 🙁

    Reply
    • malihu
      Posted on September 30, 2016 at 14:55 Permalink

      Hello,

      The plugin does not create horizontal layouts or modify theme templates in any way.
      It’s scope is to create/connect links, target elements etc. and scroll the page accordingly.

      It works on existing layouts. You need to first create a horizontal layout template or install a horizontal layout theme before using it.

      Hope this helps

      Reply
  13. vamshi
    Posted on September 24, 2016 at 23:37 Permalink

    hi malihu,
    its an outstanding plugin but am facing an issue,
    The page dose’t scroll down but it suddenly jumps. how could i solve it. any suggestions please?

    Reply
    • malihu
      Posted on September 25, 2016 at 04:42 Permalink

      Hello,

      If the page “jumps” it means that the plugin is not enabled on your link(s) (assuming your target elements are setup correctly).

      Have you enabled “Page scroll to id” on your links? If yes, how (by rel attribute, by class, by selector, shortcodes)?

      I can’t really help without seeing your page… Can you post your link?

      Reply
  14. Eric
    Posted on September 11, 2016 at 00:30 Permalink

    Hello Malihu. Thank you for creating such an awesome WP plugin! I had one quick question: I followed the instructions for adding the full navigation path so that scroll to id will work on other pages as well. However, just as one example, when I click on a menu link (https://badjoyproductions.com/#contact), the page reloads first, then scrolls to the contact section. When I was only using #contact id for the link url, the page would scroll down to the contact section right away (and smoothly).

    I am needing to use the full url as detailed in your instructions because I have a blog page (I am linking to it from the blog section on the home page), and when I go to the actual blog page (http://badjoyproductions.com/blog) all of my menu links appear as they do on the home page, but they are dead links (don’t function).

    Any suggestions on how to bring back the page scroll behavior for full url paths and not have the page reload before it scrolls to the section?

    Reply
    • malihu
      Posted on September 11, 2016 at 19:47 Permalink

      Hello,

      Your issue can be fixed easily 😉

      The re-loading happens because your full URL links do not match exactly your site’s URL. Your server seems to always use the www prefix (without https). Your links do not have the www prefix so they don’t get recognized as same page links (thus refreshing the page).

      All you have to do is to add the www part in your links. For example, change PRODUCTIONS URL from:
      http://badjoyproductions.com/#productions
      to:
      http://www.badjoyproductions.com/#productions

      Doing this should do the trick. Just make sure your links URL match the address bar URL.

      Reply
      • Eric
        Posted on September 12, 2016 at 15:32 Permalink

        You da man Malihu! That did the trick!

        Please send me your Paypal info. I cannot log into my Paypal account from your donation button link for some reason (it won’t allow me to log in when I click the link for “Already have a Paypal account?”).

        Thanks again for the quick response on this.

        -Eric

        Reply
        • malihu
          Posted on September 12, 2016 at 15:46 Permalink

          Sent. Thanks 🙂

          Reply
  15. Wonderclown
    Posted on September 9, 2016 at 17:40 Permalink

    Great plugin! Though it says it’s compatible, when I installed it on my 4.6.1 WP site I get 500 internal server error. I tried it on a clean install with it being the only active plugin and it does that same thing. As soon as it’s deactivated, the site comes back. I love the plugin too much to not try and get it resolved. Thanks!

    Reply
    • malihu
      Posted on September 9, 2016 at 18:57 Permalink

      Hello,

      I’ve tested the plugin on various 4.6.0-4.6.1 installations (clean install, old install, being the only plugin, with other plugins, on local server, on remote-live sites etc.) without any issues at all.

      Are you using a Windows server (instead of a Linux one)? I’m asking cause the only time another user said they got a 500 error was on a Windows server.

      Let me know

      Reply
  16. Antony
    Posted on September 6, 2016 at 10:28 Permalink

    Thanks for great plugin. I have a sticky menu on a one page website and I want to be able to scroll smoothly back to the top when clicking on home button in menu. Any ideas as to how I can accomplish this. Have created a id marker in my header file, but doesn’t quite scroll all the way to the top.

    Thanks.

    Reply
    • malihu
      Posted on September 6, 2016 at 10:36 Permalink

      Your id marker is probably not on the very top(?)

      A quick way to do it automatically is to use the URL #top in your page scroll to id link (no need to create the target). The plugin will scroll the page automatically to the top (HTML body element position)

      Reply
  17. Francisco
    Posted on August 23, 2016 at 22:16 Permalink

    Hi, my using the plug-in because the theme’s scroll to ID isn’t working. The thing is when i click on a menu item the menu vanishes. It also looses it’s properties: sticky herader, etc.
    Any help?
    thx.

    Reply
    • malihu
      Posted on August 29, 2016 at 00:27 Permalink

      Hello,

      I’m not sure I can tell why the menu disappears as the plugin does not manipulate any element (beyond the actual links) in any way.

      I inspected your menu links and they seem to have 10 additional javascript events (click, focus etc.) so maybe another plugin or a theme script tries to do its own page scrolling and it conflicts with ‘Page scroll to id'(?)

      What happens when you temporarily deactivate ‘Page scroll to id’? What’s the theme’s behavior in regard to menu links and page scrolling?

      Reply
  18. lima chse
    Posted on August 20, 2016 at 16:42 Permalink

    Thank You for this plugin but please let me know how can be the speed reduced while going down, it suddenly moves down.

    Thank you!

    Reply
    • malihu
      Posted on August 28, 2016 at 19:45 Permalink

      Does the page “jumps” instead of smoothly scrolling? If page scrolling is not animated the plugin might not setup correctly. If you can post your link I’d be able to help.

      Reply
      • vamshi
        Posted on September 24, 2016 at 23:32 Permalink

        hi malihu,
        even i have the same issue. the page dose’t scroll down but it suddenly jumps. how could i solve it any suggestions?

        Reply
  19. Bernd Kühl
    Posted on July 29, 2016 at 12:34 Permalink

    Hi, thank you for this wonderful plugin!

    It works fine (have installed it on a development site with X-Theme)

    I have a very long page with photos and managed to scroll this with your plugin very slowly vertically.

    Now when I try to stop the scrolling by clicking on the scrollbar or use the mousewheel, it will not stop nor change.

    What could I do here?

    Thanks in advance
    Bernd

    Reply
    • malihu
      Posted on July 29, 2016 at 18:32 Permalink

      Hello,

      At the moment there’s not an out-of-the-box way to stop page scrolling. You can only do it by adding an additional jquery script in your templates or theme.
      If you have the ability to add such script, then something like the following will do what you need:

      $(document).on("mousewheel DOMMouseScroll mousedown keyup touchmove",function(e){ //stop page scrolling animation on mouse-wheel, click, keyboard and touch var el=$("html,body"); if(el.is(":animated")) el.stop(); });

      Reply
  20. CP Orantes
    Posted on July 23, 2016 at 17:12 Permalink

    I cannot get this to work with Themify Ultra theme. for the sections, it does not use <div id. How can I get it work??? I have been following your instructions but they don't help. No scrolling at all. Frustrated.

    Reply
    • Pierre Orantes
      Posted on July 24, 2016 at 01:44 Permalink

      Here is the website that I am working on. ambazador.com I wanted the pages to scroll vertically. However, there is no auto scrolling I cannot get it to work.

      Reply
      • cporantes
        Posted on July 24, 2016 at 02:30 Permalink

        The link within the <div code for the sections is tb_section-pg1 and tb_section-pg2. I am unsure how to make them work.

        (please remove my name from the prior posts. I do not want my name to live here on the web forever)

        Reply
      • cpo
        Posted on July 24, 2016 at 02:40 Permalink

        It also is identified by: module_row_0
        and
        module_row_1

        Reply
    • malihu
      Posted on July 24, 2016 at 22:12 Permalink

      Hi,

      It seems that your theme does not allow the plugin to work. The theme scrolls the page via some custom javascript (using the mouse-wheel and keyboard) while the html, body and content elements have overflow hidden (there’s no scrollbar).

      The way your theme’s layout is set and the way it functions prevents other plugins from working with its page scrolling.

      Reply
  21. Spiezz
    Posted on July 7, 2016 at 21:30 Permalink

    Thank you SOSOSO much for this plugin.

    My question is this: when i link to a section, the nav scrolls to the center of the div= cuts off half of the div content.
    How can I make it snap to top of div?

    Thanks!

    Reply
    • malihu
      Posted on July 8, 2016 at 00:51 Permalink

      Do you have a fixed/sticky top menu that hides the top-half of your content divs when page is scrolled? Is this what you mean?

      If yes, see Offsetting fixed/sticky menus. You have to use the “Offset” option to offset scrolling according to your sticky menu height.

      Reply
      • Spiezz
        Posted on July 8, 2016 at 03:30 Permalink

        Yes that’s what I mean but offset function isn’t working for me.

        I tried 300 (px) and .site-header but there were no changes on page.

        Thanks!

        Reply
        • malihu
          Posted on July 8, 2016 at 18:20 Permalink

          I’d have to see your site/code in order to help. Can you send me a link?

          Reply
        • spiezz
          Posted on July 8, 2016 at 20:00 Permalink

          Actually appears to be working in firefox and safari- just not in Chrome.

          Ideas for how to troubleshoot this?

          Thanks!

          Reply
          • malihu
            Posted on July 9, 2016 at 01:59 Permalink

            I can’t really help unless I see your site. The plugin is browser-agnostic in the sense that if it works in one browser it works on all. My guess is either some other script handles your links or maybe some CSS property needs to be changed, but there’s no way to know without interacting with your site and see the code.

          • Spiezz
            Posted on July 11, 2016 at 18:49 Permalink

            Sorry= real information would help huh?

            It’s http://www.mapmavin.com

            Like I said- works brilliantly in other browsers but not in Chrome (funny it’s usually the other way around)

            Thanks!

          • malihu
            Posted on July 11, 2016 at 19:34 Permalink

            I checked your link in Chrome and it seems that offset is working. Did you fixed it?

            I see that you’ve set its value to .site-header which is correct as it offsets your sticky menu.

            In addition, it seems that your mobile menu (narrow viewport) does not need the offset as it’s not fixed/sticky.
            In order to make the offset apply only on the fixed menu, try changing the value to:
            .site-header:fixed

      • Spiezz
        Posted on July 12, 2016 at 02:09 Permalink

        Working now!
        🙂

        Reply
        • spiezz
          Posted on July 12, 2016 at 02:15 Permalink

          Can you remove this thread? Didn’t mean to put my personal email as name. (or change the name pls)
          Thx

          Reply
          • malihu
            Posted on July 12, 2016 at 14:21 Permalink

            Done.

  22. malc
    Posted on July 1, 2016 at 17:02 Permalink

    Hi

    Is there a way of scrolling to a featured image?
    If you visit http://nervenetdevelopment.co.uk/addvision/lagerlosning/

    This is basically a blogroll, showing posts from a certain category. If I had the target to the top of the text I want to offset it so it goes to the featured image associated with that post.

    Any ideas greatly appreciated.

    Cheers

    Malc

    Reply
    • malihu
      Posted on July 1, 2016 at 21:51 Permalink

      Hi,

      I assume that you cannot insert a target element above each featured image because the code generating them is in your theme’s template, correct?

      I don’t know what exactly you want to do (what you links will do etc.) but instead of inserting the target in the content and use the ‘Offset’ option to adjust scrolling, I’d suggest using the existing id attributes already generated by your theme.

      Finding the id attribute of each post/article is easy if you use browser’s developer tools. I don’t know how familiar you are with HTML but try this:

      Open your site in Chrome. Right-click on post’s featured image and click on “Inspect”. Developer tools pane will open and you’ll see the site’s code. The image element (<img />) will be already selected (it’s the featured image). Right above it you’ll see the wrapper element which is an article tag (<article />) which has the id attribute you want (e.g. <article id="post-42" ...>).

      Does this makes sense? Is this what you need?

      Reply
  23. 7gulli7
    Posted on June 28, 2016 at 19:36 Permalink

    Hello,
    To be honest i am quite lost and i might did something wrong , but i can not tell you what…
    You can see i created two section , and i would like them to be one after each other ( That s why i installed your plugin).
    But afeter readind and doing what asked your tutorial, i can t have this twho page in the row.
    Here the link of the web site: http://goo.gl/1JjQKd

    Do you think you can help me on this? Might be so simple for you but so difficult for me ahah

    Thanks a lot!

    best regards,:)

    Reply
    • 7gulli7
      Posted on June 28, 2016 at 19:44 Permalink

      The best would be to have a skype screen share, so you can explain me how to configure it. And what i did wrong.
      If you would like to do it but want to be pay, that i would understand, there is https://codeable.io/, just tell me.

      Reply
    • malihu
      Posted on June 28, 2016 at 23:12 Permalink

      Hello,

      The plugin does not create or modify posts/pages content. Its scope is not to help creating the content (it just “connects” links with content sections). I checked your link and there’s no content at all.

      You have to create the content as you normally do in WordPress and your theme.
      Then you can create the 2 target sections that correspond to your 2 links (#section-1 and #section-2). For example, you can create the targets using plugin’s shortcodes inside WordPress post/page editor:

      [ps2id id='section-1'/]

      Reply
      • 7gulli7
        Posted on June 29, 2016 at 19:14 Permalink

        Hello,

        Thanks for your answer!

        I think i made it better, but still a lot of things that i don t know how to do.

        To make you understand better.
        I would like to have section A and section B display on a same page, section A is a showcase, section B is a contact form. like in your demo http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html

        I will put number to be more understandable for you:)

        1) I thought at the first time that scroll to id plugin made severals PAGES display in a same page. But i understand that it is link that are display in a same page. I understood this. Am i correct?

        2) here the screenshots of this plugin settings

        https://www.dropbox.com/s/9bo9m0v2316i1lx/scroll-menu.PNG?dl=0

        https://www.dropbox.com/s/yonv4407q9hbzxu/scroll-page-contact.PNG?dl=0

        3) In the settings i put in selectors field :

        a[rel=’m_PageScroll2id’], .menu-item a

        But dont know if i should do that….

        Here the link of my settings :

        https://www.dropbox.com/s/umefnphgk0u526c/Page%20scroll%20to%20id%20%E2%80%B9%20themapharma%20%E2%80%94%20WordPress.pdf?dl=0

        4) The shortcodes appear in the page, put i don t know how to make it not appear..

        https://www.dropbox.com/s/4ec350ao38rb9wc/scroll-1.PNG?dl=0

        When i use css

        display: none —-> The link don t work any more

        if i use : visibility: hidden : it is working but there is still a space….

        5) In my menu when a page is selected, there is a green border around the text.
        When i select a section in the menu or when i go on it by scroling, it not making the border.

        https://www.dropbox.com/s/77tvxsvgqobjaf8/menu-border.PNG?dl=0

        How to make it work.

        Thanks a lot !!
        I hope you could read all my several questions!

        Again thanks.

        Best regards,

        Reply
        • malihu
          Posted on June 29, 2016 at 22:47 Permalink

          You’re welcome 🙂

          1) ‘Page scroll to id’ plugin replaces the default browser behaviour of “jumping” to page sections when links with URL containing # are clicked, by smoothly animating the page to those sections.

          It is not a theme or content generator plugin and does not create or modify posts, pages, theme templates etc. Its scope is strictly page scrolling. It helps you create links and anchor points (targets) in addition to animating the page and highlighting links and target sections.

          To make several posts or pages displayed within a single page (e.g. the homepage) you’ll have to use a WordPress theme that has this feature or develop your own theme template/function (which of course requires some knowledge on wp development).

          2) and 3) All your settings and shortcodes seem correct.

          4) You don’t need any CSS rules.
          I’m not sure why the shortcodes don’t work…

          In your link http://themapharma.com/caroussel/ I see the shortcode displayed as plain text which should not happen.

          In page/post editor, try switching from “Visual” to “Text” tab, re-insert the shortcodes and save to see if it works.

          5) We’ll deal with this after 4) works.

          Reply
          • 7gulli7
            Posted on June 30, 2016 at 12:20 Permalink

            I thanks for your answer:)

            Can you send me an email with your contact skype? if it is ok and possible for you?

            Or doing it by codeable.io .

            i have several questions, and i think would be much more easier thats way.

            What do you think?

            Best regards,

          • 7gulli7
            Posted on July 1, 2016 at 11:30 Permalink

            Hello ,

            You my prefer by comments:)

            I change the url in menu, put all in full url the link. ,

            1) You can see is working, but still the problem with the white block wich appear… Don t know how to fix this.

            https://www.dropbox.com/s/dyv9fcze31kdcoo/scroll-css.PNG?dl=0

            2) The menu, when it is full link, section 1 and 2 are bordered when i am on the page but i only want section 2 menu get border when i am in section 2 and section 1 get border when i am in section 1 . Not all in the same time.

            Do you know how to fix this?

            https://www.dropbox.com/s/f3h1j972uq5i6fs/scroll-border-2.PNG?dl=0

            Thanks a lot 🙂

            Best regards

            7gulli7

        • malihu
          Posted on July 1, 2016 at 13:56 Permalink

          It seems that the shortcode you’re adding on the editor is inserted as a code block (the target element is wrapped in pre tag). That’s why it has a white background, paddings etc.

          I don’t know how your theme post editor works but there should be a way to insert plain text/content in it(?)

          If you can’t figure out how/why this happens, send me an email to discuss further.

          Reply
  24. charlie
    Posted on June 28, 2016 at 02:02 Permalink

    Hello malihu.
    My page doesnt scroll smoothly between sections can you help me?

    url: http://amagidesarrollo.com/

    Thanks!

    Reply
    • malihu
      Posted on June 28, 2016 at 09:30 Permalink

      I get a 404 error in your link (no content, section etc.)

      Reply
      • Charlie
        Posted on June 30, 2016 at 04:54 Permalink

        It was my fault, please try again if its possible.
        Thank you so much anyway!!!

        Reply
        • malihu
          Posted on June 30, 2016 at 13:05 Permalink

          I checked your link again and it seems that your theme (or perhaps another plugin?) handles your menu links while preventing ‘Page scroll to id’ from functioning.

          When I inspect the menu links (via browser’s developer tools) I see an additional javascript click event bound, which is the one causing the problem (if this event is registered from a theme script or another plugin I can’t tell).

          I also added and tested on-the-fly (again via developer tools) a regular, non-menu link and ‘Page scroll to id’ works fine on it. This means that the other/problematic script affects only navigation menu links.

          Check if there’s some setting in your theme to disable such behavior or try deactivating other plugins that might handle links/page scrolling.

          Hope this helps

          Reply
          • Charlie
            Posted on July 10, 2016 at 22:01 Permalink

            Thank you so much for your time and advices!
            I ‘m working on them!

  25. Girvol
    Posted on June 21, 2016 at 23:26 Permalink

    Hi,

    I have installed your plugin, but page doesnt scroll smoothly but jumps to desiganted section.

    Site url: http://zamawiajacy.pl/konferencja/

    Reply
    • malihu
      Posted on June 22, 2016 at 04:13 Permalink

      Hi,

      I checked your page and it seems that none of plugin’s resources (js scripts and files) are included in the document.
      Have you developed the theme? It probably lacks the wp_footer() function (info). If this function is missing, you need to add it in your footer.php just before the closing body tag.

      Let me know if this helps

      Reply
      • Girvol
        Posted on June 22, 2016 at 22:29 Permalink

        Great! Many thanks, that was it.

        Reply
  26. jahnseo
    Posted on June 6, 2016 at 15:06 Permalink

    Your articles don’t beat around the bushes exact t to the point.
    wordpress themes

    Reply
  27. Damien
    Posted on June 3, 2016 at 11:59 Permalink

    Hi,

    I just installed your plugin and it does exactly what I want (smooth scroll) but one I click on a link it scrolls to the page top instead of down to the div.

    link: Link

    Any Idea why? I am working with a custom bootstrap theme.

    Kind regards,

    Damien

    Reply
    • malihu
      Posted on June 3, 2016 at 23:00 Permalink

      Hi,

      I can’t really say unless I see your page… Maybe you have another element with the same id in your page? Is the target element position correct when you inspect the page with browser’s dev tools?

      This issue might be very simple or complicated but using firebug or Chrome dev tools (right click – inspect element) you can search for the target element (the target id) and see its position etc.

      If you could post/send me your link I’d be able to help.

      Reply
  28. Chris
    Posted on May 29, 2016 at 00:02 Permalink

    I am getting to grips with WordPress and find videos really useful. Whilst I think your plugin is awesome some detailed demos for us less technically proficient would be really helpful to take advantage of it.
    Thanks and keep up the good work!

    Reply
    • malihu
      Posted on May 29, 2016 at 23:19 Permalink

      Thanks a lot for the feedback and suggestion! I’m planning on doing several video guides by the time I publish next plugin version (1.6.2).

      Reply
  29. alex
    Posted on May 26, 2016 at 09:33 Permalink

    malihu i couldn’t thank you more!!!!!!! Your plugin is awesome!!!!! 🙂 🙂 Yes you are right!! Again many many manyyyyy thanks!! 🙂

    Reply
    • malihu
      Posted on May 26, 2016 at 12:12 Permalink

      You’re welcome 🙂

      Reply
  30. Alex
    Posted on May 23, 2016 at 16:58 Permalink

    Hello malihu! Thank you for your amazing plugin! It’s exactly what i was looking for!!! 🙂 But i have a problem and i would like your help please. I have made anchors on the menu and also had the codeflavors menu(to be floating menu sidebar). I checked in screen options Link Relationship (XFN) and on the id’s i have on XFN m_PageScroll2id. Also i made offset 60 , i enabled Scroll to location hash and also tried on selectors id add a[rel=’m_PageScroll2id’], ul#menu-menu_sidebar li a. But nothing can you please tell me what am i doing wrong? sorry but i am newbie. Again many thank you 🙂

    Reply
    • Alex
      Posted on May 23, 2016 at 17:00 Permalink
      • malihu
        Posted on May 23, 2016 at 17:40 Permalink

        I checked your link and the plugin, menu links, offset etc. seem to work as expected. Did you fixed it? Do you need help with a specific issue?

        Reply
        • alex
          Posted on May 24, 2016 at 09:21 Permalink

          Thank you malihu for your time!! 🙂 Yes i would like please help because i am newbie. What do i have to do extra when the user scrolls down to change background in the sidebar menu(team, services,etc)?

          Reply
          • malihu
            Posted on May 26, 2016 at 05:16 Permalink

            To highlight the menu items on page scroll, add the following in your CSS:

            #cfn_floating_menu ul li a.mPS2id-highlight { background: #ED1C24 !important; }

            You’ll notice that the first menu item (“TWELVESEC”) stays always highlighted. This happens because its target element is the whole page wrapper! You need to change this target (the element with the id: keimeno_twelve_sec) to an element inside the first section (just like the rest of your sections).

Comments pages: 1 2 3 4 5 6

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