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


841 Comments

Post a comment

Comments pages: 1 2 3 4 10

  1. Javier
    Posted on October 22, 2015 at 13:51 Permalink

    Hi, congratulations for this amazing plugin.

    Is there any way to show the #id in the URL after scrolling?

    Thanks.

    Reply
  2. carlo
    Posted on October 7, 2015 at 17:55 Permalink

    is this page scroll applicable when there is link in buttons?

    Reply
    • malihu
      Posted on October 8, 2015 at 08:27 Permalink

      It won’t work on buttons (only on anchor elements).

      Reply
      • Felix
        Posted on October 20, 2015 at 04:09 Permalink

        Worked in me case, simply by adding the rel=”m_PageScroll2id” line into the button code:

        was:
        <a href="#my_work" rel="nofollow">My Work</a>

        became:
        <a href="#my_work" rel="nofollow">My work</a>

        …and it works like a charm. May be button type dependent, though.

        Reply
  3. Nina
    Posted on September 30, 2015 at 00:19 Permalink

    Hello everybody,

    I have a problem. I install plugin and than I went in menus and I created all the menu links. I also inserted in every menu item m_PageScroll2id. And after that only contact (in menu) is working in scrolling way all the rest in menu does not work.

    As far as I know the next thing I have to do is to put some HTML in pages itself. But I do not know where to find that html code.

    I created in my theme child pages of the front page.

    I am stuck and I tried already to put some html in pages and nothing worked :(.

    Regards,
    Nina

    Reply
    • Arin
      Posted on October 1, 2015 at 22:50 Permalink

      Hey Nina,

      Do your menu items look something like this? Then you shouldn’t have to manually put any special HTML in the page as long as you’re using the right attribute to scroll to. Make sure there’s only one of each attribute on the page – if there are two elements with class="scrollToMe", and you told your link to scroll to “.scrollToMe”, then it won’t do anything.

      If you’re writing content in a page and they don’t have attributes attached to them (for example, a regular <p> tag instead of <p class="scrollToMe">, then your links won’t scroll. Just go into the page/post editor in HTML mode and manually put tags around your content. <div> tags are useful for this, especially if you have a lot of content that isn’t necessarily all text.

      Good luck!

      Reply
  4. Phil Macaulay
    Posted on September 24, 2015 at 02:05 Permalink

    Hi
    I was wondering if you could advise my why on a responsive menu on ipad/phone my links do not work?
    I am using Genesis theme and the links work fine on Computer Desktop in Firefox and Chrome scrolling smoothly but Safari does not scroll smoothly – simply jumps to the link – I assume as Ipad uses Safari – it is Safari that is the issue here??
    Thank you

    Note – Under ABOUT US are the page scroll links

    Reply
    • Phil Macaulay
      Posted on September 24, 2015 at 02:11 Permalink

      I take that back about safari browser on desktop – seems fine – my issue is specifically on Iphone

      Reply
      • Phil Macaulay
        Posted on September 24, 2015 at 02:18 Permalink

        Replying to my own query here – I have narrowed it down to this – IF Safari Browser is less than 600 px – it JUST JUMPS to the links – Wider and it’s fine???
        Any suggestions on what the issue might be?

        Reply
  5. shumail
    Posted on September 22, 2015 at 09:26 Permalink

    hy sir,This is my site http://template.one.trztechnologies.com

    beacuse its one page site so i want move custom links to his related portion.
    As abouts us move his related about us portion plz help me what can i do i install plugin

    Reply
  6. Dave
    Posted on September 18, 2015 at 09:55 Permalink

    Got to know about various terms in wordpress.!

    Reply
  7. Kyle
    Posted on September 16, 2015 at 20:44 Permalink

    Hi, I am using the target short code in the text editor, and it scrolls automatically just fine, but when I view my site a grey box is appearing where the short code was entered. Right now, my site is hosted locally, so I can’t show it to you. But if it helps I’m using the Shopkeeper WordPress template, which uses Visual Composer. I am entering the short code into a Text Block page element. Lastly, I have little to know experience with coding and figuring out how everything works as I go, so please go easy on me with jargon if you can. 🙂 Thanks!

    Reply
    • malihu
      Posted on September 17, 2015 at 00:31 Permalink

      Hello,

      Although not familiar with Shopkeeper, the problem is probably that the theme’s text block has a default style (by your description it sounds like it has a gray background color and some padding).

      I’m not sure if you can change the CSS of the text block (via some custom CSS), or if you should (as it’s probably used elsewhere). Maybe there’s another way to enter the shortcode(?)

      Reply
    • Kyle
      Posted on September 17, 2015 at 01:33 Permalink

      I was able to figure out a solution. Instead of putting the short code in a Text Block I put the section id in the Row ID field under Row Settings. When I did that it didn’t have the grey box. Yay!

      Reply
      • malihu
        Posted on September 17, 2015 at 18:17 Permalink

        Great. That’s the best/proper solution 😉

        Reply
  8. Marisa
    Posted on September 15, 2015 at 02:29 Permalink

    Thanks for the great plug-in. I’m calling pages to the homepage and each page is a new section that the page scroll id can scroll to with the Nav. That works fine but how do I block the page URLs of the pages being called as I don’t want Google sending people there or visitors finding there way there.

    Reply
  9. reza
    Posted on September 11, 2015 at 19:55 Permalink

    very good thank you 😀

    Reply
  10. Aida
    Posted on September 11, 2015 at 12:13 Permalink

    Great plugin!! But I have a problem 🙁 I use a Prophoto theme and the Menu options of wordpress is not available. I create a menu directly from Prophoto.

    I create a id secctions in my home page, and I linked every menu button like that:

    wwww.aidayvictor.com/#bodas
    wwww.aidayvictor.com/#familias
    wwww.aidayvictor.com/#nosotros

    What I have to do that the plugin works with the effect?

    Thanks

    Reply
    • malihu
      Posted on September 11, 2015 at 13:52 Permalink

      If you cannot set the m_PageScroll2id rel attribute in your menu links, you have to change the default plugin selector to match your navigation menu links (see “Activating plugin on links without rel attribute” section for info).

      In your case, the menu links selector is:
      #primary-nav li a

      So go in plugin settings and add the selector in “Selector(s)” field (while keeping the default one in case you need it):
      a[rel='m_PageScroll2id'], #primary-nav li a

      Reply
      • Aida
        Posted on September 11, 2015 at 18:00 Permalink

        I works!!! Thank you very much!!

        Now, the only problem is that always it works to the same speed and with the same effect though I change de settings configurations

        Reply
        • malihu
          Posted on September 11, 2015 at 21:57 Permalink

          Did you manage to solve the issue? It seems to be working with the other easing effect now…

          Reply
          • aida
            Posted on September 14, 2015 at 23:41 Permalink

            It continues without working, I change the scroll animation speed and de scroll animation easing but always it works equally. Why? 🙁

          • Aida
            Posted on September 16, 2015 at 19:22 Permalink

            also does not work offset scroll-to position 🙁

        • malihu
          Posted on September 15, 2015 at 14:19 Permalink

          The current scroll speed value is set to 1300 and the easing to “easeOutBack”, which are exactly what I get when the page is scrolling. Aren’t those the values in plugin settings?

          Reply
          • Aida
            Posted on September 16, 2015 at 19:10 Permalink

            800 speed and easeInSine, but no matter the configuration set that always works the same

          • Aida
            Posted on September 16, 2015 at 19:23 Permalink

            also does not work offset scroll-to position 🙁

        • malihu
          Posted on September 16, 2015 at 20:37 Permalink

          All the values you mentioned (offset, 800 ms speed and easeInSine) are working correctly in your page (aidayvictor.com). I just checked it. Do you see different results?

          Reply
          • Aida
            Posted on September 17, 2015 at 10:27 Permalink

            I change indifferently the speed and the animation and always it works equally. I want a rapid animation and a linear effect as that of this http://www.pablobeglez.com

            Doesn’t work the offset scroll position, I put pixels or the selector #primary-nav. Why?

            Sorry for all questions

        • malihu
          Posted on September 17, 2015 at 18:30 Permalink

          If you want linear easing select “linear” in “Scroll animation easing” field. You may also want to disable (un-check) “Auto-adjust animation speed”.

          The offset (75 pixels) seems to work.

          Reply
  11. alex
    Posted on September 9, 2015 at 15:38 Permalink

    Hey
    nice plugin!
    I’m usineg it for subpages and subnavigations (i.e. index/slug/#anchor)
    I have some troubles. If i click on a link… it loads the subpage and scroll to the anchor (using the hash), thats fine but if i’m already on the page it doesn’t scroll between the anchors. It jumps to the anchor.
    what I’m doing wrong?

    Reply
    • malihu
      Posted on September 10, 2015 at 14:27 Permalink

      Can you send me link?

      Reply
  12. Himanshu Gurung
    Posted on September 3, 2015 at 08:52 Permalink

    Hi ,

    The plugin is working on one-page-scroll , but when its on different page and the clicking on any menu , it redirects to the home page , rather redirecting it to the particular section of home page .

    Please guide me for this , as I have followed all the steps and done the complete setting .

    Thanks

    Reply
    • malihu
      Posted on September 3, 2015 at 18:28 Permalink

      Can you send me a link? This might happen because of the way your theme works but I can’t really help unless I it.

      Reply
  13. Leigh
    Posted on August 21, 2015 at 23:13 Permalink

    I love the plugin. I have a hamburger menu on the left, and I need it to disappear on click, but right now it is staying. How should I fix this?

    Reply
    • malihu
      Posted on September 8, 2015 at 01:09 Permalink

      This is out of the scope of the plugin (it is about how your menu works), so there’s no solution related to Page scroll to id at all.

      Reply
  14. Ant
    Posted on August 15, 2015 at 06:55 Permalink

    I’ve isolated the problem, the plugin js files are not being called.

    I’ve been over all of your docs.

    There is no obvious explanation as to why this is happening.

    It should work right????!!!!!!!

    Reply
    • ant
      Posted on August 16, 2015 at 23:18 Permalink

      I fixed the issue, something I never noticed before, built the theme from scratch with Bootstrap 3. Never noticed the difference between get_gooter() to load the footer template and wp_footer () within get_footer() to load js in the footer. I haphazardly didn’t have the wp_footer, not noticing the difference and it’s importance.

      After being a developer for a while, it’s often simple oversights like that, that result in a big problem. WordPress under the hood isn’t that complex.

      Hope that helps someone!!

      Reply
      • malihu
        Posted on August 20, 2015 at 01:49 Permalink

        Thanks for posting the solution 🙂

        Indeed, functions like wp_footer() are essential for wordpress themes as most plugin rely on them to properly include scripts, stylesheets etc.

        Reply
  15. milena
    Posted on August 1, 2015 at 20:28 Permalink

    Hi,

    Great plugin!

    Client used your plugin but not setup properly.

    I allowed scroll from another pages and its work perfect on desktop.

    I have 2 problems:

    1. On tablet/mobile offset not working properly

    2. In mobile/tablet there is mobile menu whit all links to page sections. But on homepage load in menu is selected last link (probably because first page section is not visible). Also same situation is on portfolio pages.

    Please advice.
    Thanks

    Reply
    • malihu
      Posted on August 1, 2015 at 20:36 Permalink

      Can you send me the link?

      Reply
      • Milena
        Posted on August 2, 2015 at 02:18 Permalink

        Hi,

        I already send you a website in field inside contact form in previus message but here is:
        http://st-thinkscreen.thinkscreen.is/

        thanks

        Reply
        • malihu
          Posted on August 2, 2015 at 20:41 Permalink

          Ah ok, I wasn’t sure this was the URL you needed help with.

          I checked your site and the plugin cannot work with your mobile menu. This is because the mobile menu is a select element and Page scroll to id works with links (anchor elements).

          That’s why animation, offset etc. don’t work (the plugin doesn’t handle the mobile menu at all).

          The only way to make the mobile menu use the plugin, would be via a custom script which would trigger plugin’s scrollTo method each time a select option is changed.

          Reply
          • milena
            Posted on August 3, 2015 at 02:27 Permalink

            thanks for answer…

            i think that I will disable sticky menu on mobile to avoid wrong jump offset.

  16. Jeff
    Posted on August 1, 2015 at 02:56 Permalink

    Hi, I’ve got everything installed but “Screen Options” is missing on my WP (it is NOT due to JetPack, I suspect a theme is hiding it). Is there any other way I can make menu items such as #contact work? I need to add 2-3 IDs to my entire site in total, so not too big of a deal, but I can’t figure it out without the Screen Options part. Thanks very much!

    Reply
    • Jeff
      Posted on August 1, 2015 at 03:19 Permalink

      Never mind, figured it out! Just put home page URL with /#contact in menu and then manually created the top of the html for contact section* and it works great! Thanks again for the great plugin.

      Reply
      • Jeff
        Posted on August 1, 2015 at 03:20 Permalink

        Never mind, figured it out! Just put home page URL with /#contact in menu and then manually created <div id="contact">*the top of the html for contact section*</div> and it works great! Thanks again for the great plugin.

        Oops, forgot to close the code tag above.

        Reply
  17. gba
    Posted on July 28, 2015 at 22:09 Permalink

    Hello!

    I love this plugin!
    But, how can I make the plugin scroll to the right side of an anchor instead of the left side?
    Thank you very much in advance for any useful hint!

    Kind regards,
    Gerald

    Reply
    • malihu
      Posted on August 1, 2015 at 18:10 Permalink

      I’m sure I understand what you’re trying to do… Can you send me an example or describe your layout in more detail?

      Reply
  18. Dousan Miao
    Posted on July 24, 2015 at 11:14 Permalink

    Hi,

    I tried setting up the shortcode for the links and it worked as expected. But when I tried to manually add rel="m_PageScroll2id to my existing links, it just jumps to the target selectors without the scroll animation.

    my site is dousanmiao.com
    please have a look

    Reply
    • Dousan Miao
      Posted on July 24, 2015 at 11:49 Permalink

      Never Mind I fixed it! LOL

      Reply
      • Aakash
        Posted on February 24, 2016 at 15:02 Permalink

        what did you do??

        Reply
  19. Steve
    Posted on July 24, 2015 at 02:40 Permalink

    Hello

    The theme I’m using on – http://www.justgotravel.co.za – creates non wp-menu links. I inspected the menu item but I am having a bit of trouble trying to discern what I should make the selectors. The scrolling works fine on the mobile menu though.
    Would you mind having a look and helping me figure out what to add to the selector to make it work?

    Thanks for the free plugin, you rock.

    Reply
    • malihu
      Posted on August 1, 2015 at 18:27 Permalink

      The theme seems to create its own data attributes on the target sections, for example:
      data-anchor="page-islandstyle"
      The top links point to this data attribute.

      In order for the plugin to work, you’ll have to somehow change the links URL (href attribute) to point to the id attribute instead.

      For example, you’ll have to change the “GetRewarded” link from:
      #page-islandstyle
      to:
      #islandstyle
      which is the target element’s id.

      Reply
  20. Ralph
    Posted on July 11, 2015 at 13:11 Permalink

    I can’t get this plugin to work.
    My website is Ralphswork.com
    Not sure what I’m doing wrong, followed the instructions and enabled “Scroll to Location Hash”, I’m out of other ideas. Please help!
    thanks!

    Reply
    • malihu
      Posted on July 13, 2015 at 15:32 Permalink

      You don’t have any target sections in your content or template.
      Your links point to #page-id-10 and #page-id-29 but your page does not have any sections with such id attributes, so there’s nowhere to scroll to…

      For more info see Creating the target sections

      Reply
  21. micha
    Posted on July 9, 2015 at 20:33 Permalink

    Hi I’m the PlugIn works well on the same site, but it doesn’t work to jump to an other site with one click it needs to click twice! the first click it goes just to the page!

    I’m was testing with a custom link as a menu and also as a sub-menu with the same result.

    http://ftptbs.tbspartner.ch/wordpress/?page_id=106#section_geschichte

    trying under WP 4.22
    thanks

    Reply
    • malihu
      Posted on July 9, 2015 at 23:09 Permalink

      Hi,

      I think you might need to enable ‘Scroll to location hash’ in plugin settings.

      Reply
  22. Silvia
    Posted on June 26, 2015 at 18:02 Permalink

    Hi, i cant get it to work on the links, if i load the page with the url with the # it works but then y click the menu and it doesnt scroll.

    http://www.grupopalval.com/nuestro-grupo

    Reply
    • malihu
      Posted on June 29, 2015 at 21:08 Permalink

      Your links are not handled by the plugin… I can’t find the plugin scripts in your code. Maybe you deactivate it?

      Reply
  23. Duman
    Posted on June 8, 2015 at 16:59 Permalink

    Hello,

    Im trying to create a link to another page, but all I get is a scroll to the top of my page. SImple scroll works fine. (i have enabled Scroll to location hash).

    http://www.fancybg.eu (click on Minions link on home page under “our brands” and it should get you to about page – instead it just scrolls to the top of my home page).

    Please HELP!
    Thanks in advance

    Reply
  24. Amandine
    Posted on June 5, 2015 at 17:45 Permalink

    Hi thanks for this plugin!
    Can you specify where in the HTML and CSS do you put the code for target sections & links highlighting?
    Thanks!

    Reply
    • Amandine
      Posted on June 5, 2015 at 17:59 Permalink

      + I tried it but I cannot “click” the links of my menu, but the highlightning works!
      Surely because there is no href in the a so no way to go, but there is nothing about it in the tutorial.
      Thanks!

      Reply
      • Amandine
        Posted on June 5, 2015 at 18:13 Permalink

        Sorry for the replies but I’m trying to fix it, now the links work but they send me to a business page “salesforce.com” and I really dont know why!
        Thanks

        Reply
        • Amandine
          Posted on June 5, 2015 at 18:28 Permalink

          Well, I replied to all my problems myself, stuff works great now, thank you again for this tuto!

          Reply
  25. snelisse
    Posted on May 31, 2015 at 21:07 Permalink

    Hi,

    I downloaded this plugin, but I’m not that experienced with wordpress.
    I followed the instructions but can’t get my page to jump to a position that I want it to.

    I created a link in menu (the second angebote) and I insert the code also into the page, to where I want it to jump to.

    I put the offset on 100px, but nothing happens.
    Surely I’m doing something wrong, but I don’t know what.

    Can you help me,

    Best

    Reply
    • malihu
      Posted on June 2, 2015 at 18:55 Permalink

      I can’t help unless I see your page. Can you send me a link?

      Reply
  26. Ramon
    Posted on May 26, 2015 at 16:07 Permalink

    First of all “thanks for the plugin”

    I do have two small problems I can’t figure out.

    I have made a single landing page with links in one page which works fine.
    However, as soon as I go one level deeper (for instance blog or shop), my links in the page don’t work anymore.
    Only way to navigate is to first click home again. Is there a way to deeplink?

    Second problem is that I can’t seem to make the offset work.
    Nothing visually happens on my part.

    Thanks in advance,

    Ramon

    Reply
    • malihu
      Posted on May 26, 2015 at 17:07 Permalink

      For the first issue, you need to add the full URL in your links, for example:
      http://site.com/page/#section-id
      You’d also want to enable “Scroll to location hash” in plugin settings to enable animation to/from different pages.

      For the issue with the offset, I can’t really help unless I see your page and plugin settings.

      Reply
      • Ramon
        Posted on May 26, 2015 at 17:46 Permalink

        Thanks for your quick reply.

        Adding the full URL’s in links works to go and come back from Shop, in blog I can’t add an id section.

        The temp url is http://www.ramontonnaer.com/viathefarmer

        Reply
        • malihu
          Posted on May 26, 2015 at 18:01 Permalink

          The plugin is not activated on your menu links.
          It seems that you have the following value in “Selector(s)” filed in plugin settings:
          a[rel='ps2id id=']
          which is not correct.

          It should probably be:
          a[rel='ps2id']
          or just the default one.

          Your links don’t have a rel attribute at all…
          Have you followed the Creating the menu links guide?

          Reply
  27. jason
    Posted on May 24, 2015 at 06:37 Permalink

    Hello,

    Great looking plugin, if I could only get it to work.

    When I inspect element, i can find the id’s as all i see is

    Please advise…

    Reply
    • malihu
      Posted on May 24, 2015 at 13:12 Permalink

      The code you posted got stripped (place the code inside code tags).

      Reply
  28. Douglas
    Posted on May 15, 2015 at 00:47 Permalink

    Thanks you so much for this plugin. I have not tried it on my developing website (above). The question I have is, does this plugin work with Visual Composer by WPBakery Visual Composer (wpbakery.com)??? This website is a one-page/Parallax website.

    http://66.147.244.183/~okaukako/LaureBoyle/

    Thank you for responding!

    Reply
    • malihu
      Posted on May 16, 2015 at 01:30 Permalink

      Normally it should. I can’t see why not.

      Reply
  29. Giorgos K
    Posted on May 14, 2015 at 16:35 Permalink

    Hi can you send me pm to talk about this plugin?Thank you

    Reply
  30. Tommaso Gavioli
    Posted on May 8, 2015 at 16:08 Permalink

    Hi,
    thank for the plugin.

    I’ve used to create some page submenus. They work properly but there is a problem.
    If two or more links start with the same word, the menu doesn’t scroll the page as if the two lines overlap.
    For example.
    In one page dedicated to a list of Hotel, i’ve to create different blocks for different hotels and the list is “hotel 1”, “hotel 2” etc.
    In this case, starting with the same word, the scrolling menu doesn’t work.
    How can i make it work? I can’t change the names of the hotels. Thank you.

    Reply
    • malihu
      Posted on May 8, 2015 at 16:50 Permalink

      Hello,

      What you describe should not happen (plugin’s demo and examples also use the same pattern and they work well). Can you send me link with your implementation or a test page?

      Reply
      • Tommaso Gavioli
        Posted on May 11, 2015 at 12:31 Permalink

        Hi,

        this is an example page: http://nuovo.monrifgroup.net/it/gruppo/dati-finanziari/

        The submenu ID is generated by the first word of the title and Custom Fields.
        As you can see two of them start with the same word and the menu doesn’t scroll both of them.
        Do you have a hint to solve it? May be it’s a little thing…
        Thank you

        Reply
        • malihu
          Posted on May 11, 2015 at 21:48 Permalink

          Both links have exactly the same href:
          #poligrafici
          so they point to the same target.

          Clicking either link scrolls the page to the same target as expected (tested on Chrome and Firefox).

          Reply
          • Tommaso Gavioli
            Posted on May 13, 2015 at 18:37 Permalink

            Hi,
            exactly. But that is the problem? how can i bypass it? The links are automatically created everytime i open a box with custom field. And they become part of the menu. If the name is the same, i cannot use the scroll, can i?

        • malihu
          Posted on May 13, 2015 at 20:45 Permalink

          The plugin will scroll the page to the id. That’s what it does.
          You could maybe use plugin’s shortcodes to create your links instead of custom fields(?)

          If both links are the same how would you use them with or without “page scroll to id”?

          Reply
          • Tommaso Gavioli
            Posted on May 14, 2015 at 14:07 Permalink

            ok, i’ll figure it out.
            thank you.

Comments pages: 1 2 3 4 10

Post a comment

Cancel reply

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