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.

Divi WordPress Theme

Creating id targets

Creating id targets in post block editor (Gutenberg)

You can create your targets in more than one ways in the block editor, e.g. using the group block, the “Page scroll to id target” block, the shortcode block, block class attribute, HTML anchor field etc.

Create id targets using the group block

Click on the “Add block” icon and select “Group”. This will insert a general container block that can group other blocks and we can add the id on this group/general container block.

On the group block properties (right panel) you can add the id you want in the “HTML Anchor” field.

Create id targets using the “HTML Anchor” field

If you use headings in your content, you can use the “HTML Anchor” attribute of blocks to set a target id. Select your block, click “Advanced” in the right panel and insert the target id you want in the “HTML Anchor” field.

Create id targets using plugin’s “Page scroll to id target” block

The plugin has its own custom block for inserting targets: “Page scroll to id target”

Create id targets using “Additional CSS Class(es)” field

You can generate id targets for any block element, by setting its class name to: ps2id-id-yourid, changing the yourid part to the id value you want.

Click on a block element (e.g. a paragraph), click “Advanced” in the right panel and set the target id you want in the “Additional CSS Class” in the form of:
ps2id-id- plus the id you want.
For example, if you want to create the target id “last-section”, give the element the CSS class:
ps2id-id-last-section.

Create id targets using the shortcode block

You can use plugin’s shortcodes in the block editor. Click on the “Add block” icon and select “Shortcode”.
Add the [ps2id id='section-1'/] in the shortcode field to create a target with id section-1.

You can also use the [ps2id_wrap] shortcode accordingly.

Creating id targets in post visual editor (classic “old” 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

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).

You can use plugin’s shortcodes in the block editor. Add the shortcode: [ps2id url='#some-id']link text[/ps2id] inside any block element to create a link that points to the “some-id” target.

Keep in mind that since “Page scroll to id” version 1.6.3, the plugin is enabled by default on all links with a non-empty hash value (e.g. #some-id) in their URL. This means that you don’t have to use plugin’s shortcode to create links, as any link you create via the WordPress editor will work.

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


830 Comments

Post a comment

Comments pages: 1 2 3 9

  1. Matthew
    Posted on May 6, 2015 at 21:15 Permalink

    Hi,

    I am trying to offset my links within the plugin from WordPress. Unfortunately, it is not working correctly or at all. I have a second menu setup at the top of the page, once I click that the offset should help make it stop before the content gets cut off.
    Also, the page is skipping down to the place on the page and not scrolling down as I have it set to do. I would like it to scrolling down the page instead of skipping to the spot.
    Please let me know how to fix this issue.
    Thanks!!

    Reply
    • malihu
      Posted on May 7, 2015 at 00:08 Permalink

      Hi,

      By what you describe it seems that the plugin does not handle your links at all. I can’t say why this happens or what to do though unless I see your page…

      As a first step, you could inspect your page via browser’s dev tools to make sure your links are correct (have proper href and rel attributes) and your targets are properly set (with id attributes etc.)

      Reply
  2. Jaiji
    Posted on May 5, 2015 at 18:17 Permalink

    Hi. Thanks very much for this plugin, I’ve used it on a number of sites, so far without any hitches. However I have a small problem on a site I’m developing which I can’t for the life of me work out.

    http://jaijiel.net/testsites/fullcirqle/

    Highlights are all fine except for the Membership section. As far as I can tell it’s identical in every way with all the other sections but its menu item only highlights if the page is reloaded from that section. Once you scroll, all sections highlight as they should except that. The class “mPS2id-highlight” isn’t being applied it.

    Any idea what’s happening?

    Reply
    • malihu
      Posted on May 5, 2015 at 18:52 Permalink

      Hello,

      I just checked your page and this happens because you have a second “#membership” link (“Become a member”), so the script highlights this one instead of the one in the menu.

      This is easily fixed by adding your menu links selector in the “Highlight selector(s)” field in plugin settings, e.g.
      nav .menu-item a

      The “Highlight selector(s)” field is basically telling the plugin which links are eligible for highlighting in case you have multiple anchors with the same href in the document (as in your case).

      Reply
      • Jaiji
        Posted on May 6, 2015 at 18:19 Permalink

        Thank you so much, I really appreciate it.

        Reply
  3. MRK
    Posted on May 5, 2015 at 06:19 Permalink

    Helo, i installed the app on my wordpress and it only seems to scroll down and stop scrolling..

    Reply
    • malihu
      Posted on May 5, 2015 at 08:09 Permalink

      If you want a horizontal scrolling you need to set “Layout” to horizontal (or auto for both axis).

      Reply
  4. kishore babu
    Posted on April 28, 2015 at 15:35 Permalink

    Hai iam Kishore from India… i like this Page to Scroll id Plugin and iam new to WordPress. in my site menu are About | Product | News | Career | Exports | Contact us . under About us menu there is 4 sub menus i want to implement Page to Scroll in About us menu only is this Possible….. please guide me

    Reply
  5. nag
    Posted on April 18, 2015 at 14:39 Permalink

    hii this plugin works fine, when i click on the links it goes to link but does not highlights, instead of highlight it disappears can we please solve this asap

    Reply
    • malihu
      Posted on April 18, 2015 at 19:57 Permalink

      This is not due to the plugin. In your bootstrap.css you have the following CSS which causes the issue:
      .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #fff; background-color: transparent; }

      The highlight classes work fine but due to the above CSS the links get “hidden”.

      Reply
  6. Andy
    Posted on April 17, 2015 at 14:57 Permalink

    Hello,

    thank you very much for this plugin.
    I would like to ask you about the problem I have got.
    I am using offset and it work fine in normal desktop and tablet resolution. If I go to the smartfon resolution the offset stops to work. I don’t know why. Do you have any idea what can be wrong?

    Regards,
    Andrzej

    Reply
    • malihu
      Posted on April 18, 2015 at 00:29 Permalink

      I can’t really say but in general, plugin’s offset works regardless of screen size.
      Maybe your theme uses another menu element for narrow screens? I wouldn’t know if this is the case or because of some CSS rule without seeing your page in action…

      Reply
      • Andy
        Posted on April 20, 2015 at 10:54 Permalink

        Hi,

        thank you for your reply. I am using the same menu on normal and narrow resolution. If you would like to see this web go to this link: http://serwer1507400.home.pl/test-scroll

        I would be really appreciative for your help.

        Andy

        Reply
        • Andy
          Posted on April 20, 2015 at 12:17 Permalink

          There are 2 menus. The second which you can see in the mobile view you will find in id=”offcanvas”. There is every thing done as in the normal menu. According to me it shoud work fine but it is not.

          Maybe you will find the solution.

          Reply
        • malihu
          Posted on April 20, 2015 at 20:37 Permalink

          I think the problem is the way the theme’s mobile menu works. I believe that its links are not handled by “Page scroll to id”. They’re handled by the theme (or some other plugin?), meaning that plugin’s offset should not work…

          You can see that another script handles the mobile menu links as it disables all scrolling when menu is opened and when you click a link, it closes the menu and then scrolls to the id. None of these are done by “Page scroll to id”.

          Reply
          • Andy
            Posted on April 21, 2015 at 11:15 Permalink

            Theank you,

            it is exacly what you suggested. I was wrong because I tought that if there is scroll on the page it must be done by your plugin. Now I know that there is another one as well. I have to find out how to make your plugin working in mobile menu as well.

            GREAT JOB.

            Regards,
            Andy

  7. Matt Nicholls
    Posted on April 14, 2015 at 04:50 Permalink

    Hi am just building my site right now and I am working with this plug in and I must say first of all THANK YOU, and you did a wonderful job. Only suggestion is with this tutorial for the people like me who aren’t very good with coding if you could include a segment in the tutorial about what needs to be done for the return to top part.

    Do you need to add something into the Link Relationship (XFN)? What needs to be added into the HTML to make my button go to the top of the page?

    Reply
    • malihu
      Posted on April 14, 2015 at 16:17 Permalink

      Hello,

      Back-to-top links work the same as any other link handled by the plugin. If your link’s href/URL is set to “#top”, the plugin script will automatically scroll the page to the top without the need to have a target element with id “top”.

      So, if you create your back-to-top link in WP menu, set “Link Relationship (XFN)” to “m_PageScroll2id” and its URL value to “#top”.

      If you create the link via shortcode in wp editor:
      [ps2id url='#top']Back to top[/ps2id]

      And if you create the link manually in your theme’s template(s):
      <a href="#top" rel="m_PageScroll2id">Back to top</a>

      As long as your link points to “#top”, you don’t have to do anything in the HTML (no need to create target element).

      Reply
  8. david
    Posted on April 13, 2015 at 23:23 Permalink

    Hi, I’d like to try this plugin. Just wanted to know if it’s possible to keep the tabs fixed (always visible) when scrolling to an id?
    Thanks for your help
    David

    Reply
    • malihu
      Posted on April 14, 2015 at 01:21 Permalink

      Hi,

      The plugin does not modify your theme’s markup or CSS (except for the highlight classes) so its functionality is not affected by your menu position.

      Reply
  9. Davids
    Posted on April 9, 2015 at 10:23 Permalink

    Hallo!

    Unfortunately I can’t get it work. Here is my site – http://web.derigs.lv/alion. I set up menu as customs links with m_PageScroll2id relationship, I have div #content, but scrolling won’t work. What I’m doing wrong?

    Thanks in advance!

    Reply
    • malihu
      Posted on April 9, 2015 at 13:40 Permalink

      Scrolling works for me (tested in Chrome, Firefox). I don’t know what you mean by “not working” but the actual page scrolling is really short so maybe you don’t notice it? Try decreasing your browser’s height.

      Also, your menu links all point to different pages so page scrolling happens after each page is loaded.

      Reply
      • Davids
        Posted on April 12, 2015 at 13:49 Permalink

        Hallo!

        Thank’s for response!

        Actually, that is the idea – when menu is clicked, new page is loaded and div.content (between and ) scrolls vertically to another page div.content. Is it correct – that’s what Scroll to location hash does?

        May be I should preload all the pages vertically, than set overflow to hidden to make it work?

        Reply
        • malihu
          Posted on April 14, 2015 at 01:17 Permalink

          Yes, that’s exactly what “Scroll to location hash” does so you can use it as it is.

          Reply
  10. Annie
    Posted on April 7, 2015 at 19:55 Permalink

    Love your plug-in but the scroll animation speed doesn’t change – I want to slow it down. How do I fix this?

    My menu info looks like this – url: #about nav label: About link relationship: m_PageScroll2id

    and in the page the id is:
    [chapter id=”aboutus”]

    Reply
    • malihu
      Posted on April 7, 2015 at 19:59 Permalink

      The option “Scroll animation speed” should work. Increasing its value will increase the animation duration. If this setting does not work, then your links are not handled by “Page scroll to id” but by some other script from your theme or another plugin (you can test this easily by deactivating the plugin and see if page animation still works).

      Reply
      • Annie
        Posted on April 9, 2015 at 23:38 Permalink

        Thanks for your response! I deactivated the plugin to check, and it is definitely the plugin that is causing the menu to work.

        I adjusted the speed again and now it is working if you click on the ‘home’ menu botton, but not with any of the other menu functions, even though they’re set up the same way. Any ideas on how to fix this?

        http://mtbaldy.sandpointmarketing.com

        Reply
        • malihu
          Posted on April 10, 2015 at 00:33 Permalink

          Your links seem to be handled by more scripts than “Page scroll to id”. I inspected your menu links with dev tools (jQuery audit) and they have 3 click events attached. One of them is by “Page scroll to id” (it has plugin’s namespace). The other 2 are probably attached by your theme or some other plugin (I wouldn’t know, they have no namespace).

          It seems that these other script(s) are somehow handling your menu items that point to an existing id within your content. The “Home” link works as it points to “#top” which does not exist as id but it’s handled internally by “Page scroll to id”.

          I can’t really provide a solution as the links are handled by more than one scripts (at least I hope I gave you some help regarding the origin of the problem).

          Reply
  11. Jess
    Posted on March 23, 2015 at 00:58 Permalink

    Hi my client has requested a navigation that has a drop down menu, with the drop down menu for each page using the one page layout for each so in essence it will scroll down to a section on the page. In wordpress I made the navigation in the pages. I’ve tried using this plugin but can’t seem to get it working. I tried setting it up in the menus but then nothing happens (not sure if this is because my navigation is set up through pages not menu) Anywho if someone could point me in the right direction of how to go about this. I’ve made one page websites from scratch before but never on the wordpress cms, everything I try doesn’t seem to work… I’m stumped!

    Reply
    • malihu
      Posted on March 24, 2015 at 15:31 Permalink

      I’d need to see how your drop-down menu works. Have you added the rel value to your links? If you can’t add a rel value, you can change your links selector in “Selector(s)” filed in plugin settings.

      Reply
  12. Georgette
    Posted on March 19, 2015 at 14:53 Permalink

    Hi,
    This plugin looks great but I can’t make it works. I create my pages and my menu with links (with the full url) I must put # or not… I want it to scroll horrizontally. Can you help me please ? Thanks a lot.

    Reply
  13. Stuart
    Posted on March 17, 2015 at 12:28 Permalink

    Hi there,

    Great plugin, works straight out of the box. I have a unique use case though that I am having trouble resolving.

    Can Scroll to ID be used inside a Nivo Light Box. The issue I am having is finding the right selector for the Scroll to ID to use, as the lightbox is already using ‘#inline-content’ to display the content in the lightbox.

    Am I able to use Scroll to ID in this way?

    Many thanks for a great plugin.

    Reply
    • Stuart
      Posted on March 17, 2015 at 14:16 Permalink

      Ok, so I managed it by using an iFrame and creating a blank wordpress template for an iFramed page that uses Scroll to ID.

      Not ideal but it works for now. If you have an alternative, non iFramed way to accomplish this I would be interested to hear it!

      Cheers.

      Reply
  14. Andrew_V
    Posted on March 11, 2015 at 22:05 Permalink

    Hi there, just in need of some advice, this site is specifically a dev. site right now.

    I’ve put the #id into each section via “beaver builder” – which is a visual builder – Each section row enables an #id, which can be seen when you click on a section and ‘inspect element’.

    I’ve followed the instructions for the menu (so they link to the section #id’s) but it isn’t working and I can’t for the life of me figure out why.

    Could you see if the relationship between menu items / section id’s is being interrupted somehow or, for some reason invalidated? I like this plug-in and would love to get it working.

    Many thanks

    Andrew

    Reply
    • malihu
      Posted on March 12, 2015 at 01:15 Permalink

      Hello,

      I check your page with browser’s dev tools and it seems that your target element id attributes are not correct, as they have a hash (#) in their value. For example:
      <div id="#adventures-section">...</div>
      The above should be:
      <div id="adventures-section">...</div>

      Reply
      • Andrew_v
        Posted on March 12, 2015 at 02:09 Permalink

        HOLY CRAP – I’ve been in front of the computer too long. I cant believe I looked over such a simple error a dozen times. I’m so sorry for wasting your time. Haha. This plugin is amazing and I appreciate you getting back to me, even if for such a simple error as that – haha. *facepalm*

        Reply
        • malihu
          Posted on March 12, 2015 at 02:23 Permalink

          No problem. Happens to me all the time 🙂

          Reply
          • Andrew_V
            Posted on March 13, 2015 at 16:49 Permalink

            Hi again, really sorry to bother you, but from the FAQ page (or any page outside of the home page) some menu items aren’t lining up well with their correct #id.

            I think it might be because it has to scroll passed a video in the background which may be being loaded dynamically when the home page is “ready” – I’m just wondering if there’s a work around for this?

            If i click the menu twice it works, or if I click any menu item within the home page everything is fine, it just seems to be from another page, with any menu item after ‘testimonials’ – I guess just let me know what I can do here.

            I also sent a donation your way since this plugin is really great. It’s almost too good to be free, especially with your prompt support.

            Many thanks

        • malihu
          Posted on March 13, 2015 at 19:42 Permalink

          Indeed that’s why this issue happens. The theme seems to set the container height dynamically after the video is loaded, meaning that each section after it has changed its top position while the page is scrolling (that’s why when you click a second time it goes to the correct position).

          The only way to deal with this is via javascript. More specifically, you need to edit one of plugin’s js files and change one line of code. This is what to do:

          Edit jquery.malihu.PageScroll2id-init.js which resides in wp-content/plugins/page-scroll-to-id/js/

          Change line 72 from:
          $.mPageScroll2id("scrollTo",_hash);
          to:
          setTimeout(function(){ $.mPageScroll2id("scrollTo",_hash); },600);

          and save the file.

          Check if the issue is fixed. If it’s not, increase the value of 600 a bit (e.g. 800) and check again until it works. This value is a delay so page scrolling happens after video is loaded.

          Let me know if this helps and thanks a lot for the donation 🙂

          Reply
          • Andrew_V
            Posted on March 16, 2015 at 16:07 Permalink

            Totally fixed. Really appreciate your help & feedback. Many, many thanks. The plugin is great, the support is phenomenal, I will be continually using this plugin for all my WP projects.

            Thanks so much.

            Sincerely,

            Andrew

  15. David
    Posted on March 4, 2015 at 11:10 Permalink

    Hi,
    I have also a problem with the scrolling animation. There is no animation on my page. If I click on a navigation-link it jumps right to the section, but there is no smoothing animation. Do you have any solution for me?

    scroll-to-id settings:
    selector: a[rel=’m_PageScroll2id’]
    animation speed: 1000
    Scroll animation easing: linear
    Scroll-to position: auto-adjust
    Scroll to location hash: enable

    menu item settings:
    href: #section1
    xfn: m_PageScroll2id

    WordPress Version 4.1.1

    Thank you in advance.

    BR
    David

    Reply
    • malihu
      Posted on March 5, 2015 at 19:00 Permalink

      It sounds like the script is not handling your links. Do you have the element with id “#section1” in your content? Is there a link where I could see your page?

      Reply
  16. Oretta
    Posted on February 24, 2015 at 15:14 Permalink

    Hi Malihu

    Page Scroll to Id has been working fine until I created a drop down menu.

    The drop down menu works on all other pages, but my home page where I am using Page Scroll Id, the drop down menu items are not appearing, instead there is a white box.

    You can see it on this link:http://www.locallinko.com and placing your cursor on the ‘About’ link in the menu.

    Do you have any idea how I can rectify this problem?

    Many thanks
    Oretta

    Reply
    • malihu
      Posted on February 24, 2015 at 15:52 Permalink

      In which other page does it work?
      I can’t see how it’s related to “Page scroll to id” plugin…

      Reply
      • Oretta
        Posted on February 25, 2015 at 13:17 Permalink

        Hi Malihu

        You can see the drop down menu working on the contact page: http://www.locallinko.com/contact/

        The contact page is not using Scroll-to-id.

        I look forward to your reply.

        Reply
        • malihu
          Posted on February 25, 2015 at 14:45 Permalink

          This is not about “Page scroll to id” (which is also activated on the contact page). The sub menus on home and contact page have different CSS rules.

          For example, in home page the “About” li element has the classes “megamenu” and “no-caption” which completely change its submenu elements. On contact page those classes do not exist.

          Reply
          • Oretta
            Posted on February 26, 2015 at 03:32 Permalink

            Excellent, thank you very much. I have managed to correct the error with the insight you gave above. 🙂

  17. JD
    Posted on February 17, 2015 at 20:16 Permalink

    Hi! Thank you for this plugin! I was able to get the page to scroll but after the page scrolls to the id, it scrolls again, second time faster. My first thought was that maybe it was the animation, so I tried changing that, but that didn’t fix the problem. The link that I want to scroll is the “Contact” link in the main header navigation. When clicking the Contact link it should scroll down to the footer section. Can you help me figure out what is wrong?

    Thanks again!

    Reply
    • malihu
      Posted on February 18, 2015 at 03:03 Permalink

      Hello,

      You don’t seem to be using Page scroll to id plugin (it does not seem installed or activated). Some other script/plugin does the page animation (I saw waypoints script in your HTML).

      Reply
  18. brandon
    Posted on February 11, 2015 at 22:41 Permalink

    Hi,
    I am having a hard time trying to figure out how to get this to work properly.
    Can you give me step by step instructions? I know there is some within the plugin page but I still cannot figure out how to get it to link properly.
    Let me know!
    Thanks,

    Reply
    • malihu
      Posted on February 11, 2015 at 22:57 Permalink

      Hello,

      This page is a step by step tutorial. If you need more info, you need to tell me which specific step you need help with.

      If you followed the tutorial and plugin guides and your page doesn’t seem to work, I’d need to see your code or link in order to help.

      Reply
      • brandon
        Posted on February 12, 2015 at 21:08 Permalink

        Here is the link to the website…
        http://digitizeguys.ozly.co/pricing/

        I am trying to link the 5 services at the top of the page to the appropriate section below. I am using the wordpress theme 7. It doesnt exactly give you anywhere to place the div inside where the headings are.

        Reply
        • malihu
          Posted on February 12, 2015 at 22:34 Permalink

          I think this is a question for the theme developers. I’m not familiar with the theme but you should ask them if/how to add custom links in your content and/or how to add id attributes in your sections.

          Can you add wp shortcodes in the post editor? If yes, the plugin offers shortcodes for adding both links and targets (see “Help” menu in plugin settings).

          Reply
  19. Scott
    Posted on February 4, 2015 at 07:36 Permalink

    Thanks for the great plug-in. Can I please have assistance with two things?

    1) I am not getting the offset to work. I want the scroll to not go so far as my target section is being covered up by the fixed menu. To avoid this, I entered into the Offset field, my selector, #header. I also tried inputting pixels in the Offset field, but the scroll did not appear to be impacted. A good example of this can be see if you click on the ‘FAQ’ menu item.

    2) Links highlighting: This is not happening automatically. I tried to add this by modifying my style.css. Still, the links do not stay highlighted when the target section is visible. They are only highlighted on hover. Below is a snippet from my style.css. Any ideas?

    #main-nav li a { display: block; height: 36px; line-height: 36px; padding: 0 15px; border:0px; color:#303030; } /*added by Scott to keep menu item highlighted if it is visible*/ #main-nav li a.mPS2id-highlight-first { display: block; height: 36px; line-height: 36px; padding: 0 15px; border:0px; background-color:#C7C7C7; color:#white; } #main-nav li a:hover { background-color:#C7C7C7; color:white; } /*old #main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav li.active a { background-color:#C7C7C7; color:white; }*/ /*new*/ #main-nav .current-menu-item a.mPS2id-highlight-first, #main-nav .current_page_item a.mPS2id-highlight-first, #main-nav li.active a.mPS2id-highlight-first { background-color:#C7C7C7; color:white; }*/

    Reply
    • malihu
      Posted on February 4, 2015 at 17:11 Permalink

      Hi,

      The links in your page do not have the rel attribute “m_PageScroll2id”, meaning your links are not handled by “Page scroll to id”. They’re handled by your theme or some other plugin which also animates the page.

      That’s why none of “Page scroll to id” functions work. The plugin is activated but it’s not applied on your links.

      See “Creating the menu links” for a guide on how to add the rel attribute “m_PageScroll2id” on the menu links.

      Reply
      • Scott
        Posted on February 4, 2015 at 18:26 Permalink

        Thanks for the quick response! What’s strange is that I did set-up the rel attribute per the instructions. Below are two links to screen shots that show how I’ve set this up (including using the short code). The scrolling only worked once I set these items up, so I do think “Page scroll to id” is semi-working.

        Could there be something that is making it appear like the rel attributes are not set-up that is also making some of the page scroll to id functionality not work? Thanks again!

        http://webcodemojo.com/link_relationship.png
        http://webcodemojo.com/short_code.png

        Reply
        • malihu
          Posted on February 4, 2015 at 19:39 Permalink

          I believe you but let explain further 🙂

          The scrolling started working once you set the menu items, because your links URL pointed to sections within the same page. Before setting the URLs to include a hash (#), your theme didn’t need to scroll the page.

          Your theme (or maybe some other plugin) is clearly modifying and handling your menu links. When viewing your page with browser’s dev tools, your links have the following custom attributes:
          data-scrollto ng-href
          These attributes “tell” some other script what to do (the first to scroll the page and the second where to scroll).

          The same script is probably removing the rel attributes (by inspecting the links via dev tools, I see no rel attributes on them).

          The shortcode does work but it’s not affecting the menu links.

          Anyway, “Page scroll to id” is not currently handling your links. I see only one javascript click event (via Chrome’s jquery audit extension) and it’s not applied by the plugin (it doesn’t have plugin’s namespace). “Page scroll to id” cannot work on elements selector’s that are not set in plugin’s settings.

          Maybe your theme has an option to disable its internal page scrolling functionality?

          Reply
          • Scott
            Posted on February 5, 2015 at 06:49 Permalink

            Thanks again, Malihu, for your assistance. This is definitely a mystery. It’s like I set-up Page scroll to id, and that got the scrolling to work (i.e. without the short codes, scrolling does not work), but because something else is overriding it from being fully set-up all of the Page scroll to id functionality is not there.

            My site uses AngularJS. I think the issue is related to this because Googling ng-href returns a lot of items related to AngularJS.

            Thanks, and let me know if you have any ideas…

            I’ll be making a donation as a thanks for the plug-in and your assistance.

        • malihu
          Posted on February 5, 2015 at 08:02 Permalink

          You could try adding:
          a[data-scrollto]
          in “Selector(s)” field in plugin’s settings page.

          This might overwrite the other script(s) with “Page scroll to id” functions (at least it should enable links highlighting).

          Reply
          • Scott
            Posted on February 5, 2015 at 18:49 Permalink

            This helped! I now am seeing that my changes in the Scroll to page id settings are changing the behavior of my site. I think I now just need to work through the settings to figure out exactly what they should be. Thanks for all your help!!

  20. Oretta
    Posted on January 31, 2015 at 13:25 Permalink

    Hi Malihu

    Very many thanks for this awesome plugin. It does exactly what I need it to do – and so easy to install and set up.

    I just have two queries:

    1. I created a ‘home’ link, but unlike all the other nav links, the plugin jumps to the top of the page when the home link is clicked, instead of scrolling back up to the top of the page. The home link is not a section as it’s the top of the page. I have the ‘Scroll to location hash’ ticked. I am not using a URL in the title attribute box. I have just added the page from the menu selection and pasted in the ‘m_PageScroll2id’ code in the link relationship box. How can I make the plugin scroll back up to the top of the page when the ‘home’ link is clicked and not jump to the top?

    2. The scroll stops perfectly at every section on the page except one, it just stops a little to soon, so the bottom of the previous section is visible. I have tried to adjust the offset a little bit, but I am afraid that it may throw all the other sections off that are stopping perfectly. Is there a way to adjust one section without throwing all the other sections off?

    Best regards,
    Oretta

    Reply
    • malihu
      Posted on January 31, 2015 at 13:58 Permalink

      Hi Oretta,

      1. Give your link the href/URL: #top

      2. Maybe you can give this section a top padding value via your CSS(?). If the offset is correct on the rest of your sections, then you should just adjust the CSS of the section that’s not. If you could send me a link I’d be able to help more on this.

      Reply
      • Oretta
        Posted on February 2, 2015 at 17:13 Permalink

        Hi Malihu

        The home button now glides perfectly to the top of the page, thank you.

        Here is my website link for the second issue re: the scroll stopping short of the top of the ‘Right For Me?’ section.
        http://www.locallinko.com.

        I haven’t adjusted the padding / CSS yet. I wanted to take you up on your offer to take a look before I started making any adjustments.

        I look forward to your reply and again, many thanks for your help.

        Oretta

        Reply
        • malihu
          Posted on February 2, 2015 at 18:08 Permalink

          The issue you’re having is caused by the negative top margin on your section (CSS selector: .vc_custom_1422708818513). This is either set manually (by you?) or by the theme itself as an extra rule (it’s applied on some other sections too).

          In order to avoid issues caused by negative margins, my suggestion is to set the top and bottom margins to zero and remove the top padding of #main-content element:

          #main-content{ padding-top: 0; } .row.fw-content-wrap{ margin-top: 0 !important; margin-bottom: 0 !important; }

          Reply
          • Oretta
            Posted on February 3, 2015 at 16:54 Permalink

            Excellent!

            It all works perfectly now Malihu.

            Many thanks for all you help and time.

            Kind regards
            Oretta

  21. Pavan
    Posted on January 31, 2015 at 02:57 Permalink

    Hi! Malihu,
    Thanks for the Great Plugin and continuous updates, I have an issue, I have installed the plugin in http://www.drbrand.ca/clients/tbgoc/
    and now i dont want the smooth scrolling so i have removed the rel and deleted the plugin, but still the website scrolls to id, is there anything i need to do further to remove the scrolling comletely?
    Pavan

    Reply
    • malihu
      Posted on January 31, 2015 at 04:32 Permalink

      Hello,

      It doesn’t have to do with Page scroll to id. This is a functionality of either your theme or some other plugin.

      Reply
      • Pavan
        Posted on January 31, 2015 at 21:37 Permalink

        No It was not ike that before I installed the plugin, do you write some JS dynamically or something where it might not removed after the uninstallation of the plugin or something?

        Reply
        • malihu
          Posted on February 1, 2015 at 23:05 Permalink

          No. It doesn’t have to do with Page scroll to id.

          Your menu links have a js click event attached which is not handled or added by Page scroll to id plugin.

          In your theme’s custom.js (http://www.drbrand.ca/clients/tbgoc/wp-content/themes/Divi/js/custom.js) you have the et_pb_smooth_scroll function called on “a[href*=#]:not([href=#])” (which matches your menu links selector) and animates the page.

          You think it wasn’t like that before, because you hadn’t created menu links with #id in their URL before adding Page scroll to id.

          Hope this helps

          Reply
  22. AQthinker
    Posted on January 30, 2015 at 20:33 Permalink

    I am having trouble getting my side menu to work with the scrolling effect. Can you please let me know where I am going wrong.

    I used a selector div[id=’#’] along with the recommended one from the tutorial with out any success.

    Here is the Organization of my menu:
    <section id="nav_menu-5" class="widget widget_nav_menu" style=""> <div class="widget-wrap"><div class="menu-safety-games_sub-container"><ul id="menu-safety-games_sub" class="menu"> <li id="menu-item-851" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-851"><a rel="m_PageScroll2id" href="#safetygames-benefits">Benefits of Safety Games Online</a></li>

    Reply
    • malihu
      Posted on January 30, 2015 at 21:02 Permalink

      You don’t need this selector:
      div[id='#']

      Is this what you’ve inserted in “Selector(s)” field in plugin settings?

      Normally you should only have the default selector:
      a[rel='m_PageScroll2id']

      If there’s an element with id “safetygames-benefits” in your page, scrolling should work.

      Reply
      • AQthinker
        Posted on February 4, 2015 at 20:01 Permalink

        I’m not having any luck. Here are all the ways I’ve tried to link the element to the navigation bar with no luck.

        <div href="#safetygames-benefits"></div> <div id="#safetygames-benefits"></div> <a href="#safetygames-benefits"rel="m_PageScroll2id"></a>

        Reply
        • malihu
          Posted on February 4, 2015 at 20:27 Permalink

          Your anchor tag (a) is correct. Your target should be:
          <div id="safetygames-benefits"></div>

          Reply
  23. Irrvrsl
    Posted on January 19, 2015 at 17:48 Permalink

    Hello, Malihu! I’m using your plugin, it works fine, thanks for your job! I have a question: can scrolling be on mouse wheel?

    Reply
    • malihu
      Posted on January 19, 2015 at 18:31 Permalink

      Out-of-the-box? No.

      Depending on your theme and page layout, you’ll need to use additional plugins (e.g. jquery-mousewheel) to be able to bind mouse-wheel events that’ll trigger “Page scroll to id” scrollTo method in a custom script in your theme.

      In short, you’ll need to write custom javascript code specific to your layout/markup.

      Reply
      • Irrvrsl
        Posted on January 19, 2015 at 20:10 Permalink

        Actually i don’t know javascript. Then I’m not going to change anything. Thank you for reply.

        Best regards.

        Reply
  24. Amalia
    Posted on January 15, 2015 at 19:06 Permalink

    I have done everything for installing your plug-in and the links seem to work except that no scrolling animation occurs. You can see what I mean when you go to the site, select “The Bar” from the drop down menu under “Explore Our Site”. Then again at the bottom of “The Bar” text section where it says “Return to Top” and takes you back to the top page.
    Is the page not long enough or is the plug-in not compatible with my WP Theme?
    Thanks!

    Reply
    • malihu
      Posted on January 15, 2015 at 19:21 Permalink

      I think that your values in “Selector(s)” field in plugin settings are not correct.
      You currently seem to have:
      m_PageScroll2id, ReturnToTop
      It should be:
      a[rel='m_PageScroll2id'], a[href='#ReturnToTop']

      Reply
  25. Rob
    Posted on December 29, 2014 at 23:28 Permalink

    To start off, great plugin! Exactly what i’ve been looking for. Only issue i’m having is with the link highlighting. II’ve tried everything in the documentation, but can’t seem to get the current sections related link to highlight. Any ideas?

    Thank you!

    Reply
    • malihu
      Posted on December 30, 2014 at 00:56 Permalink

      I can’t really say unless I see your page or code.

      Reply
  26. Marenne
    Posted on December 28, 2014 at 16:20 Permalink

    Hi! Thank you for creating this plugin!

    I created a WordPress page where all the posts (not pages) are laid out horizontally. There is a javascript scroller in place with arrows that move the content in a scroller-window, the navigation menu is in a fixed location on the screen.

    <div id="scroll-window"> <div id="contents-wrap"> <div id="goleft"></div> <!--javascript scroller by id "scroll-window"--> <div id="navigation"> <a href="#blok1" rel="m_PageScroll2id">…</a> <a href="#blok2" rel="m_PageScroll2id">…</a> <a href="#blok3" rel="m_PageScroll2id">…</a> </div> <div id="wrapper"> <article id="blok1">…</article> <article id="blok2">…</article> <article id="blok3">…</article> </div> <div id="goright"></div> <!--javascript scroller by id "scroll-window"--> </div> </div>

    I’d love to be able to click on a navigation link and be scrolled to the corresponding article/post, but it’s not working… I already chose ‘horizontal’ in the plugin options. Do you perhaps know I could make it work?

    Reply
    • malihu
      Posted on December 28, 2014 at 17:32 Permalink

      Hi,

      The plugin only works with browser’s native scrollbar by animating the document’s root element (html or body). If you content resides in an overflowed div and/or scrolling is handled by javascript “Page scroll to id” won’t work. Is this the case?

      Reply
  27. Leandro
    Posted on December 10, 2014 at 05:17 Permalink

    Hi Malihu
    This is great, however i would like to have different pages, one on top of the other without any menu. Like a One page layout scrolling vertical.

    Will that be possible to accomplish with this plugin?

    Thanks in advance for your help.
    -Lea

    Reply
    • malihu
      Posted on December 10, 2014 at 10:54 Permalink

      How will you navigate through your pages/sections? This plugin deals mostly with in-page navigation, it does not create single-page themes.

      Reply
  28. Cocco
    Posted on December 9, 2014 at 17:32 Permalink

    Hi,

    This plugin seems to be exactly what I need but unfortunately I’m not too savvy on the development side. I think I followed the tutorial above and I made a menu item but I just didn’t understand how to make the link scroll to the corresponding page..
    I have a site with few pages and I would like the menu items to scroll the pages horizontally. What should I do? 🙂

    Thanks!

    Reply
    • malihu
      Posted on December 10, 2014 at 00:54 Permalink

      Hello,

      If you created your links and have elements in your page with a corresponding id, it should work.
      For horizontal scrolling, you’ll need to set “Page layout” option (in plugin settings) to “horizontal”.

      Does your page contain sections with ids like the ones in your links URL?

      Reply
  29. Jim
    Posted on December 4, 2014 at 18:13 Permalink

    Thanks so much for this plugin and your excellent, detailed tutorial.

    This is the third plugin I’ve tried for smooth anchor scrolling but the first without glitches. I’m throwing a donation your way right now.

    Reply
    • malihu
      Posted on December 4, 2014 at 20:53 Permalink

      Thank you!
      I’ll post more tutorials and guides related to page scroll to id this month 🙂

      Reply
  30. peter
    Posted on November 21, 2014 at 16:17 Permalink

    Typo on http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/

    You have: Creating target sections in the editor via “shrotcodes”

    This should read “shortcodes”

    Minor error, thanks for the plug-in, still trying to figure it out, which is why I was reading the tutorial.

    Peter

    Reply
    • malihu
      Posted on November 21, 2014 at 20:36 Permalink

      Thanks for letting me know 🙂

      Reply

Comments pages: 1 2 3 9

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php