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


518 Comments

Post a comment

Comments pages: 1 3 4 5 6

  1. Cazoi
    Posted on May 12, 2017 at 04:55 Permalink

    This menu works well however I have one problem I can’t figure out. When I refresh my page, my page loads to the middle of my website instead of the top. Is there a setting I’m missing?

    Reply
    • malihu
      Posted on May 12, 2017 at 18:03 Permalink

      I can’t see your page link as it’s under construction.

      When you refresh the page, does browser’s address bar display a hash (e.g. http://www.hochadelwedding.com/#id)? If yes, this means that the page will scroll to this hash/target.
      If browser’s address bar displays just http://www.hochadelwedding.com/ it should not scroll anywhere but the top.

      If you don’t want to scroll to a hash (#) target on page load, you can disable “scroll from/to different pages” option in plugin settings.

      Reply
      • Cazoi
        Posted on May 13, 2017 at 21:34 Permalink

        Ok I just posted the site so you should be able to see it now. I can’t get the links to scroll to the proper location and when I refresh my page it loads in the middle of the website rather then the top. I’ve tried offsetting the pixels and using the nav id but nothing seems to be lining up. Am I missing something?

        Reply
        • malihu
          Posted on May 14, 2017 at 22:42 Permalink

          I checked your site and refresh works normally for me (the page loads wherever you are in the page).

          In the Offset field, you’ve set the value navigation-menu which is not an existing element selector (it’s not an id either, id selectors start with #).

          You could use the following selector (class) to compensate for your top navigation bar:
          .site-navigation-fixed

          Reply
          • Cazoi
            Posted on May 16, 2017 at 22:39 Permalink

            Thank you for your help! It works nicely. I was still unable to line it up using .site-navigation-fixed. I even tried using the header image. I ended up setting the offset to 475px. So far it seems to be working well. Thank you again.

  2. Guillermo
    Posted on May 10, 2017 at 19:00 Permalink

    Plugin works like a charm on my frontpage. I’ve simply added “#front-section-fourcolumn” to customized link as a menu item.It scrolls where i want.

    However, my problem is : When I’m not at the front page, when i click that menu item,nothing happens and what i get is “www.sitename/blabla/front-section-fourcolumn” on the address bar.

    How can i get it work? What i want this menu item to do is, simply going that very same section which it scrolls on the front page directly.

    Thank you, great work, greetings!

    Reply
    • malihu
      Posted on May 10, 2017 at 20:30 Permalink

      You need to add the full URL in your link. See:
      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-5

      Reply
      • Guillermo
        Posted on May 11, 2017 at 14:31 Permalink

        Thank you so much,i was missing such a simple thing ! Now it works.

        Is there any possibility to make it go that section directly without scrolling animaton only from different pages ?

        And I’d prefer not to see anything more than link of the page itself in the address bar when I go from a different page.

        So I guess basically what I want is a “Negative”append link function, and a minus value on the “milliseconds delay for scrolling to target on page load”.

        I don’t know if I miss something again, or these are complicated to do.

        Thank you so much!

        Reply
        • malihu
          Posted on May 11, 2017 at 17:59 Permalink

          You’re welcome 🙂

          You cannot do this via the plugin as it does not support different scroll durations for links that point to a different page.

          If you don’t want to scroll smoothly to a target/section on a different page (i.e. scroll to target instantly), you simply need to disable scroll from/to different pages option.
          This will make the link behave as any link that leads to an anchor point.

          You cannot remove the hash (#id) from the URL though (when scrolling to a different page). And even if you could, I’m not sure it would be good for the UX (a user clicking on a link that points to a section expects the browser’s URL to display that section as he/she may want to bookmark it, save it etc.).

          Reply
          • Guillermo
            Posted on May 12, 2017 at 13:17 Permalink

            Thank you so much ! Have a nice day

  3. John Merlo
    Posted on April 9, 2017 at 04:17 Permalink

    I posted earlier but forgot the coke I was using if it helps.

    This is the text in header area: Let’s Talk

    This is at the bottom of the page: [ps2id id=’some-id’/]

    This is what happens: Warning: Class __PHP_Incomplete_Class has no unserializer in /home/content/a2pewpnas01_data03/00/3909600/html/wp-content/object-cache.php on line 894

    Reply
    • malihu
      Posted on April 10, 2017 at 14:11 Permalink

      This error is not related to “Page scroll to id” (it might be related to WPML or WPML media plugin)

      Reply
  4. John Merlo
    Posted on April 9, 2017 at 01:59 Permalink

    Why is this coming up on page when logging in to site if you refresh it goes away?
    http://emgrefunds.com/
    Warning: Class __PHP_Incomplete_Class has no unserializer in /home/content/a2pewpnas01_data03/00/3909600/html/wp-content/object-cache.php on line 894

    Reply
  5. Tania C
    Posted on April 8, 2017 at 07:17 Permalink

    Hi,
    I’ve followed the instructions:
    – used full page url in custom links (http://localhost:8888/#enquire)
    – added the link relationship m_PageScroll2id in the custom link area

    However, when I load the page and click on the link, it jumps to the section rather than scrolls. If I click on the link from another page, it also jumps to the section.

    Is there anything I can do to fix this?

    Thank you.

    Reply
    • malihu
      Posted on April 9, 2017 at 01:47 Permalink

      Hello,

      I can’t really help unless I see your page/site.
      The full page URL value seems correct.
      Did you add the m_PageScroll2id value in “Link Relationship (XFN)” field (as described above)?

      I don’t know how your theme works but maybe you need to enable “Prevent other scripts from handling plugin’s links” option(?)

      Can you inspect the page with browser’s dev tools? If yes, what’s the link’s HTML output you see? What classes does the element have?

      Reply
      • Tania C
        Posted on April 11, 2017 at 03:42 Permalink

        I copied the html from the dev tools below:
        <li id="menu-item-51" class="ps2id menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-51"><a rel="m_PageScroll2id" href="http://localhost:8888/#enquire" data-ps2id-api="true">Contact Us</a></li>

        All the options to scroll to anchor on another page is checked in the settings as well as ‘prevent other scripts from handling plugin links.

        I’m not sure what could be stopping it from working…

        Reply
        • malihu
          Posted on April 12, 2017 at 00:23 Permalink

          The plugin does not seem to be enabled on your link.

          Do you have an element with id enquire in your HTML? Check the HTML output via dev tools and see if such element exists (please note that the element should have the id attribute, not name).

          Reply
          • Tania C
            Posted on April 12, 2017 at 06:50 Permalink

            Yes, it it is a section with a class of #enquire.

        • malihu
          Posted on April 12, 2017 at 15:26 Permalink

          It should be id (not class). The plugin works with the id attribute.
          If the target element with id enquire does not exist, you can create it yourself using plugin’s buttons, shortcodes etc.

          Reply
  6. Margaret
    Posted on March 27, 2017 at 17:13 Permalink

    I can’t seem to get this plugin to work. I suspect I’m either not setting up the URLs properly with the “#” or there’s some kind of incompatibility with the theme I’m using (Sydney). Can someone help me?
    Thanks so much,
    Margaret

    Reply
    • malihu
      Posted on March 28, 2017 at 00:57 Permalink

      I checked your pages and I can’t a find any links that point to an id (e.g. http://www.enable-eu.com/#id).

      Did you add such links? If yes, how did you add them (via shortcode, HTML, in wp menu)? I need more info in order to help.

      Reply
  7. Nate
    Posted on March 20, 2017 at 19:50 Permalink

    Recently wordpress “updated” my site but it changed a bunch of things around 🙁

    Few questions:

    1) The scroll to ID from the RED “Find a Church” button used to scroll further down the page to the “Churches” section. It no longer does. How do I fix that problem?

    2) How do I eliminate the new sidebars on most pages that include ARCHIVES and META? The search box is OK, I just want to eliminate the other items.

    3) Is there a way that I can set my site to NOT automatically update? I don’t want to have to revamp everything over again in the future.

    Thanks!
    Nate

    Reply
    • Nate
      Posted on March 20, 2017 at 20:15 Permalink

      OK, I just fixed the scroll problem but still cannot figure out the side bar issues and settings to not auto-update in the future. Thanks for any help you can give!

      Reply
      • malihu
        Posted on March 20, 2017 at 21:32 Permalink

        Hi,

        These issues are related to your theme. You need to contact your theme’s developer on how to do what you need. Maybe the Archives and Meta are set in widgets page(?) and you can remove them from there.

        You can also read a link about automatic updates here:
        http://www.wpbeginner.com/wp-tutorials/how-to-disable-automatic-updates-in-wordpress/

        Reply
        • Nate
          Posted on March 21, 2017 at 01:19 Permalink

          THANK YOU. I am very illiterate when it comes to this stuff. How do I contact the themes developer? I never had this problem with the theme until wordpress updated. I checked the widgets section and those items are not checked to be visible?

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

            I can’t really say where to contact your theme’s developer. Probably from the same place you got the theme.

  8. Niko
    Posted on March 9, 2017 at 23:37 Permalink

    Hey! Thanks for the great plug-in -it’s awesome!

    On my current Project – http://www.blechnik.com – (PW: 12) i’m using links for the wordpress menu navigation. The link should bring the visitor to the page and the section. At the Moment the plug-in is active for the “unternehmen” sections.

    I need help with the following problem… The click on the link always refresh/reload the page and then scroll down from the top, even when i’m already on the target page.

    I saw the other questions about this problem here and checked the URL, i think it is correct.

    Thanks!

    Reply
    • malihu
      Posted on March 10, 2017 at 01:28 Permalink

      Hello,

      I just checked your page and the solution is very simple, but first let me explain what happens.

      The page refreshes because your web server is set to always remove the trailing slash from the address bar URL.
      For example, enter http://blechnik.com/unternehmen/ in the browser and click enter. You’ll see that you go to the URL http://blechnik.com/unternehmen (notice the missing trailing / after unternehmen).

      Now, the URL of your links have a trailing slash before the #id part (e.g. http://blechnik.com/unternehmen/#pgc-20-0-0). So when you click the link, the browser simply goes from http://blechnik.com/unternehmen/#pgc-20-0-0 to http://blechnik.com/unternehmen#pgc-20-0-0 (because of your web server setup).

      The solution

      The solution is to simply remove the trailing slash from your links URL. For instance, change “Unternehmensphilosophie” URL from:
      http://blechnik.com/unternehmen/#pgc-20-0-0
      to:
      http://blechnik.com/unternehmen#pgc-20-0-0

      Important

      Your theme seems to be using its own custom function for scrolling the page (the script that has this function is ...themes/moesia-pro-ii/js/scripts.js). This prevents “Page scroll to id” from scrolling the page, using offsets etc.

      To fix this, go to “Page scroll to id” settings and enable (check) “Prevent other scripts from handling plugin’s links” option (under “Advanced options”). Save changes and you should be good to go 😉

      Let me know

      Reply
      • Niko
        Posted on March 10, 2017 at 10:07 Permalink

        Thank you so much, great support! Everything is fine now, the solution is simple but i wasn’t able to find the failure.

        Niko

        Reply
  9. John Merlo
    Posted on March 4, 2017 at 18:49 Permalink

    On this website http://e62.61f.myftpupload.com/ the Let;s Talk link does not size in media view any ideas? John

    Reply
    • malihu
      Posted on March 5, 2017 at 14:52 Permalink

      This question is not related to the plugin so I’m not sure how to help.

      Reply
      • John Merlo
        Posted on March 6, 2017 at 04:12 Permalink

        How do I change the rollover color of the text you must be able to use some css and why would it not be related

        Reply
        • malihu
          Posted on March 6, 2017 at 14:55 Permalink

          It’s not related because it’s a general CSS question. The plugin does not style elements at all (i.e. visual design is out of its scope).

          You change the appearance of links the same way you do on any link, e.g. via your theme’s stylesheet or a custom CSS field.
          The links created by “Page scroll to id” have nothing special and you style them just like any other link.

          The rollover color in CSS is done using the :hover selector

          Hope this helps

          Reply
  10. John Merlo
    Posted on March 4, 2017 at 08:42 Permalink

    I am trying to color the text nothing is working except the text size
    .ps2id {font-size: 175%; } this works
    .ps2id {color: green; } this does not

    This is the HTML
    Let’s Talk

    Reply
  11. John Merlo
    Posted on March 2, 2017 at 19:49 Permalink

    The Let’s Talk link on the header does not work well in mobile view? What can be done about this? John

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

      Hi John,

      What do you mean by not working well? I’ve tested it and scrolling works the same in desktop and mobile views.

      Reply
    • John Merlo
      Posted on April 11, 2017 at 04:34 Permalink

      If that is true why when the error comes up the page to scroll does not work till I refresh? I do not even have a plug in called WPML? In other words I need to refresh to have the page to scroll even work? John

      Reply
      • malihu
        Posted on April 12, 2017 at 00:18 Permalink

        The error might prevent some scripts from working (it’s impossible for me to be sure). This does not mean that the error is produced by those non-working scripts (e.g. “Page scroll to id”).

        If the error happens when you login, then you need to search what plugins or theme code is related to either login or cache.

        “Page scroll to id” does not affect in any way the PHP file you posted. To test this, try deactivating “Page scroll to id” and see if the error is still there.

        Reply
  12. Thara
    Posted on February 27, 2017 at 14:01 Permalink

    Hi Thr,
    Thanks for the amazing plugin.I added three submenus namely(A,B,C) in a single page.
    When I click on ‘A’ it should go to ‘A’ similary for other two.The problem is either I click on A or B or C. It just scrolls to B.It doesnot move to the desired ID.
    I used the shortcode : [ps2id id='A' target=''/] [ps2id id='B' target=''/] [ps2id id='C' target=''/]

    Reply
    • malihu
      Posted on February 27, 2017 at 22:54 Permalink

      Hi,

      I can’t really tell what could be happening without seeing your page… Your shortcodes seem correct but I don’t know their position within the content and I don’t know your links code and URL.

      If you could post your link I’d be able to see what happens and help.

      Reply
      • Thara
        Posted on February 28, 2017 at 06:50 Permalink

        Thanks for the quick reply. I’m taking the contents from the db.And it works dynamically.
        '<div class="woocommerce columns-' . $columns . '" id="apple"><h1>Apple</h1> ' . $apple. '</div><div class="woocommerce columns-' . $columns . '" id="bird"><h1><br>Bird</h1> ' . $bird. '</div><br><div class="woocommerce columns-' . $columns . '" id="cat"><h1><br>Cat</h1> ' .$cat. '</div>';

        Reply
        • malihu
          Posted on February 28, 2017 at 11:05 Permalink

          So, did you add the targets with shortcodes ([ps2id id='apple' target=''/]) or via HTML (<div class="..." id="apple">...</div>)?

          Reply
          • Thara
            Posted on February 28, 2017 at 11:25 Permalink

            via HTML

          • Thara
            Posted on February 28, 2017 at 12:03 Permalink

            via HTML.

        • malihu
          Posted on February 28, 2017 at 11:53 Permalink

          And your links? Are they point to #apple, #bird etc.?

          Are your links in WordPress menu or within content? Did you add them via shortcode? If yes, which shortcode?

          Reply
        • malihu
          Posted on February 28, 2017 at 13:17 Permalink

          Try inspecting your links (right-click the link and select inspect) with browser’s developer tools and see if they have the _mPS2id-h class.

          If they do have that class, try enabling Prevent other scripts from handling plugin’s links option in plugin settings.

          If they don’t, see step 3 of this FAQ to enable the plugin on your links manually.

          Also make sure your target sections are not within an an overflowed div.

          You should also inspect your targets (via browser’s developer tools) and see their position within document’s flow. If their position is not where you want it to be, you might need to re-position them in your content or tweak their CSS properties.

          Reply
          • Thara
            Posted on February 28, 2017 at 14:38 Permalink

            My link has _mPS2id-h class and I enabled ‘ Prevent other scripts from handling plugin’s ‘ links option in plugin settings.

            May I know what is overflowed div?

            More Info:
            I used woocommerce plugin .
            I have three categories such as apple,bird,cat in a single page. Under each categories i listed some of the books. For example if i click on ‘apple’ scroll should move to ‘apple’.

            I used woocommerce shortcode and page to scroll id shortcode in same page as,
            [ps2id id=’apple’ target=”/]
            [ps2id id=’bird’ target=”/]
            [ps2id id=’cat’ target=”/]
            [recent_products per_page=”30″ columns=”3″ orderby=”date” order=”desc”]

        • malihu
          Posted on March 1, 2017 at 20:12 Permalink

          An overflowed div is a div element with its own scrollbar.

          If you inspect the target elements with browser’s developer tools you can see their position (place cursor over the element in the code pane to see the element highlighted in browser window). Check if the elements position is correct or you need to re-position them.

          Reply
          • Thara
            Posted on March 3, 2017 at 09:47 Permalink

            Thanks for the reply.

            The scroll works only for the first click.
            This how my elements are placed. I inspect it and got the following code.

            <a id="apple" data-ps2id-target="" class="_mPS2id-t mPS2id-target mPS2id-target-first"></a> <a id="bird" data-ps2id-target="" class="_mPS2id-t mPS2id-target"></a> <a id="cat" data-ps2id-target="" class="_mPS2id-t mPS2id-target mPS2id-target-last"></a>

          • Thara
            Posted on March 3, 2017 at 09:58 Permalink

            And also got the following error in console

            Uncaught TypeError: Cannot read property ‘length’ of undefined
            at page-scroll-to-id.min.js:2

        • malihu
          Posted on March 3, 2017 at 13:30 Permalink

          If your targets are placed one next to each other in the same position (as you posted), then the links will scroll to that same position.

          I can’t really say why that console error occurs unless I see your page. Did you add the _mPS2id-h class manually on any of your links?

          Reply
          • Thara
            Posted on March 4, 2017 at 06:03 Permalink

            My items are placed like this,
            <li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-100"> <a href="http://localhost:8888/wordpress/books/#apple" data-ps2id-api="true" class="_mPS2id-h mPS2id-clicked">Apple</a></li> <li id="menu-item-97" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-97"> <a href="http://localhost:8888/wordpress/books/#bird" data-ps2id-api="true" class="_mPS2id-h">Bird</a></li> <li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-96"> <a href="http://localhost:8888/wordpress/books/#cat" data-ps2id-api="true" class="_mPS2id-h">Cat</a></li>

            I didn’t add _mPS2id-h manually.

        • malihu
          Posted on March 5, 2017 at 14:48 Permalink

          I was referring to your target elements (what you posted are your links).

          If your targets are exactly like you posted above:

          <a id="apple" data-ps2id-target="" class="_mPS2id-t mPS2id-target mPS2id-target-first"></a> <a id="bird" data-ps2id-target="" class="_mPS2id-t mPS2id-target"></a> <a id="cat" data-ps2id-target="" class="_mPS2id-t mPS2id-target mPS2id-target-last"></a>

          Then the links will scroll to the same place (because your targets are on the same place).

          Reply
          • Thara
            Posted on March 6, 2017 at 08:54 Permalink

            Hi these are the shortcodes I added in my page,
            [ps2id id='apple' target=''/] [recent_products per_page="30" columns="4" orderby="date" order="desc"] [ps2id id='bird' target=''/]
            It scrolls correctly for ‘apple’.But for ‘bird’ the scrolling is just moving a bit from ‘apple ‘.
            Is the above code correct? If not how it should be?

        • malihu
          Posted on March 6, 2017 at 15:00 Permalink

          The code seems correct. Try changing the target shortcodes from simple anchors to wrappers:

          [ps2id_wrap id='apple'] [recent_products per_page="30" columns="4" orderby="date" order="desc"] [/ps2id_wrap] [ps2id id='bird' target=''/]

          Reply
          • Thara
            Posted on March 7, 2017 at 06:16 Permalink

            Hi Malihu,

            Thank you for ur reply. The code you sent doesn’t make much difference. I added like,
            [ps2id_wrap id='apple-1'] [recent_products per_page="30" columns="4" orderby="date" order="desc"] [/ps2id_wrap] [ps2id id='bird-2' target=''/]
            And it works like a charm.

  13. David
    Posted on February 24, 2017 at 02:13 Permalink

    Hey man, great plug-in, but i have a question. I have only set the plug-in to work with my contact area and for some reason when i click the button the page first refreshes then it does the magic. Any idea how i can stop the page from refreshing?

    Cheers.

    Reply
    • malihu
      Posted on February 24, 2017 at 02:48 Permalink

      Hi,

      The page refreshes because your link’s URL uses http while your server uses https. Simply change your link’s URL to https://www.ftb-unibuc.ro/#contact to fix this.

      After changing the link, you’ll notice that the page “jumps” to the id instead of scrolling smoothly. This happens because your theme seems to be using a custom menu walker function as well as a custom page scrolling function for the in-page menu links.

      Because of the custom menu walker function, “Page scroll to id” cannot be automatically enabled on the menu links, so you need to give the contact link the class ps2id.

      Lastly, go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option to prevent your theme from handling the link and let “Page scroll to id” to its thing.

      Reply
  14. Chris
    Posted on February 22, 2017 at 20:23 Permalink

    Hello I’m Chris, First of all great plugin.
    I have a problem when from the menu I click the target the scrolling plugin always start from the top pf the page.
    For example the last section of the page is contact and over it there is Donate.
    If I’m already in the contact section and I want to reach donate it goes up at the top of the page and down to the target.
    Do you know how to fix this problem?
    The webpage is not live yet.
    I’ll wait details thanks
    Chris

    Reply
    • malihu
      Posted on February 23, 2017 at 00:51 Permalink

      Hello Chris,

      I’d need a bit more info or to see your site in order to see what exactly happens and help.

      Does the page reload when clicking the links? If yes, make sure your links URL match exactly the browser’s address bar URL (e.g. see if you’re missing the www part from links URL).

      Reply
  15. Pauliina
    Posted on February 18, 2017 at 22:28 Permalink

    My page is created with WordPress Enlightenment theme. The problem is that all links targeting to the main page are highlighted in menu as bold. Only one link that goes to another page is not highlighted. I wouldn’t like to have any kind of highlight there at all, I would like all menu items to look like “tausta” is looking now (meaning it is normal grey text, not bolded). How can I make that happen? I have tried all possible ticks in scroll-to-id settings but nothing changes. And I am not familiar with those CSS things, so I couldn’t figure out what I should write not to highlight anything, since the default seemed to be that I should want them highlighted 🙂

    But this functionality is great anyway, thanks a lot for that!

    Reply
    • malihu
      Posted on February 18, 2017 at 23:28 Permalink

      The “highlighting” you see comes from your theme’s stylesheet (not from “Page scroll to id”). It’s common for themes to style current page menu items differently.

      Since all your menu links (except “Tausta”) point to a target on the same page, the theme considers them current/active links and apply the bold styling.
      The CSS where this happens is in ...themes/enlightenment/style.css in line 791.

      You should edit your theme’s CSS (style.css) and change or overwrite the current/active link styling so it does not apply on “Page scroll to id” links.

      For example, adding the following CSS in style.css or in the theme’s custom CSS will do what you need:

      .navbar-default .navbar-nav > .active > a._mPS2id-h { font-weight: normal; color: #555; }

      Hope this helps

      Reply
      • Pauliina
        Posted on February 19, 2017 at 12:45 Permalink

        Thank you SO MUCH for your help and easy instructions! This corrected the situation and it works perfectly now!

        Reply
  16. Alejandro C
    Posted on February 11, 2017 at 19:14 Permalink

    Hello, I am using your plug in as the developer from my theme recommended i use it. Although the menu on my website seems buggy when you click on the links.

    Do you think you can help me out?

    Regards,

    Reply
    • malihu
      Posted on February 11, 2017 at 19:31 Permalink

      Hello,

      Your menu links seem to be handled by a script in your theme (i.e. the theme has its own way of scrolling to page anchor points).

      Try enabling “Prevent other scripts from handling plugin’s links” option in plugin settings and see if it fixes the issue.

      Let me know

      Reply
      • Alejandro C
        Posted on February 11, 2017 at 19:40 Permalink

        Thank You

        That fixed the issue.

        Great customer service.

        5 stars

        Reply
        • malihu
          Posted on February 11, 2017 at 19:59 Permalink

          You’re welcome. Glad I helped 🙂

          Reply
  17. Alvin
    Posted on February 3, 2017 at 13:04 Permalink

    Excellent!

    I see that you have improved the tutorial quite much; even with an easy to follow video.

    Keep doing a terrific job.

    Best regards,

    Alvin

    BTW, shouldn’t I receive an email when you answer a comment? I always have to get back to the comment section to see is any reply.

    Reply
    • malihu
      Posted on February 3, 2017 at 14:31 Permalink

      Thanks for the feedback 🙂

      I’ve just released a new version (1.6.2) which introduces new features, options etc., so I also updated (and extended) the basic tutorial. I’ll try to post more guides and videos for plugin’s advanced features.

      WordPress doesn’t send email notifications to anonymous users but I’ll try to find/implement a simple solution for this (e.g. email notifications on comment replies).

      Reply
  18. Jtd
    Posted on February 2, 2017 at 02:29 Permalink

    Hi im having a problem. Page to scroll id is not scrolling down. Can you help me find the conflict to the plugin? Page scroll I set up to about us page. (Menu: Mission, Vision and Corp profile. Thanks

    Reply
    • malihu
      Posted on February 2, 2017 at 03:27 Permalink

      Hi,

      There’s a script in your theme that handles your links and prevents “Page scroll to id” from working. The script is:
      ...themes/mobius/js/ajaxify.js

      You need to edit ajaxify.js, find line 77 and the change part:
      $this.find('a:internal:not(:contains(checkout),:contains(Checkout),
      to:
      $this.find('a:internal:not(:contains(checkout),._mPS2id-h,:contains(Checkout),
      leaving the rest of the code in that line (77) exactly as it is.

      We’re just adding the ._mPS2id-h selector to the string so the function does not mess with “Page scroll to id” links.

      Hope this helps

      Reply
      • Ji
        Posted on February 2, 2017 at 05:44 Permalink

        Thanks. It works.

        Reply
  19. Horace
    Posted on February 1, 2017 at 00:03 Permalink

    Coped the lines that now begin to show differences:
    AS ENTERED IN TEXT
    1 [ps2id url=’#1^’ offset=”]1[/ps2id][ps2id id=’1^’ target=”/]
    2 [ps2id url=’#2′ offset=”]2[/ps2id][ps2id id=’2′ target=”/]
    3 [ps2id id=’3′ target=”/][ps2id url=’#3′ offset=”]3[/ps2id]
    4 [ps2id id=’4′ target=”/][ps2id url=’#4′ offset=”]4[/ps2id]
    5 [ps2id id=’5′ target=”/] [ps2id url=’#5′ offset=”]5[/ps2id]

    IN NOTES at end of text:
    1 [ps2id url=’#1^’ offset=”]1[/ps2id][ps2id id=’1^’ target=”/]
    2 [ps2id id=’2′ target=”/][ps2id url=’#2′ offset=”]2[/ps2id]
    3 [ps2id id=’3′ target=”/][ps2id url=’#3′ offset=”]3[/ps2id]
    4 [ps2id url=’#4′ offset=”]4[/ps2id] [ps2id id=’4′ target=”/]
    5 [ps2id url=’#5′ offset=”]5[/ps2id][ps2id id=’5′ target=”/]

    Reply
    • malihu
      Posted on February 1, 2017 at 17:00 Permalink

      The links should be like:

      [ps2id id='_ftn1_ref'/] [ps2id url='#_ftn1']1[/ps2id] [ps2id id='_ftn2_ref'/] [ps2id url='#_ftn2']2[/ps2id] [ps2id id='_ftn3_ref'/] [ps2id url='#_ftn3']3[/ps2id] [ps2id id='_ftn4_ref'/] [ps2id url='#_ftn4']4[/ps2id] [ps2id id='_ftn5_ref'/] [ps2id url='#_ftn5']5[/ps2id]

      The notes should be like:

      [ps2id id='_ftn1'/] [ps2id url='#_ftn1_ref']1[/ps2id] [ps2id id='_ftn2'/] [ps2id url='#_ftn2_ref']2[/ps2id] [ps2id id='_ftn3'/] [ps2id url='#_ftn3_ref']3[/ps2id] [ps2id id='_ftn4'/] [ps2id url='#_ftn4_ref']4[/ps2id] [ps2id id='_ftn5'/] [ps2id url='#_ftn5_ref']5[/ps2id]

      Reply
      • Horace
        Posted on February 2, 2017 at 18:58 Permalink

        Phew! Thanks so much, Malihu!

        Those links all work so well on the pages where I’ve been placing them.

        Except that two of the pages show ordinary type rather than italics as on the first page. I tired, but haven’t succeeded in italicising the code. Can you suggest how?

        Also, if there any chance of automating the footnote numbers?

        So many thanks again!

        Horace

        Reply
        • malihu
          Posted on February 2, 2017 at 20:22 Permalink

          You’re welcome 🙂

          1. You can make any text italic via CSS, for example:
          span.italic { font-style: italic; }
          but I can’t give you the exact CSS code cause I don’t know which elements you want italic(?)

          2. The plugin cannot automate such numbers as it’s out of its scope/functionality.

          Reply
        • Horace
          Posted on February 6, 2017 at 12:42 Permalink

          I did get it done.
          It’s scrolling nicely.
          And right on target.
          Thanks so much, Malihu

          Reply
  20. Horace
    Posted on January 31, 2017 at 23:37 Permalink

    Hi,

    Did my best to avoid having to come for help; but hours spent getting my first footnotes sorted left me with the five notes on my first post acting inconsistently.
    Haven’t been able to settle on one pattern.
    The notes scroll Ok in one direction, but not in the other, and all fail to land on the line needed.
    I just don’t get the coding – offsets and ids – right.

    Can you help?

    Reply
  21. Manuel
    Posted on January 20, 2017 at 12:11 Permalink

    Hi malihu,

    your plugin is working so far good – the only thing that I can’t get correct, is the smooth scrolling on the website. On the mobile version it somehow works, but when you go to the websit, it’s just jumping to the ID’s I set.
    Do you have any idea why?

    Thx for your help,
    Manuel

    Reply
    • malihu
      Posted on January 20, 2017 at 19:10 Permalink

      Hi,

      Your links seem to be handled by the following script:
      ...themes/bridge/js/default.min.js
      which prevents “Page scroll to id” from handling your links and scroll the page.

      The script is minified but my guess is that the following part of code should be changed:
      ".vertical_menu a, .qbutton:not(.contact_form_button), .anchor, .widget li.anchor a"

      Try editing default.min.js and change the above code to:
      ".vertical_menu a:not(._mPS2id-h), .qbutton:not(.contact_form_button), .anchor:not(._mPS2id-h), .widget li.anchor a:not(._mPS2id-h)"

      This should prevent the script from messing with “Page scroll to id” links.

      Let me know

      Reply
      • Manuel
        Posted on January 23, 2017 at 13:40 Permalink

        Hi malihu,

        awesome, it works perfectly now.
        Thank you very much – I love your PlugIn.

        Have a wonderful day,
        Manuel

        Reply
  22. Tomey
    Posted on January 10, 2017 at 00:39 Permalink

    Malihu
    i was able to resolve it. Was missing mi id. Your plugin is great! thanks a lot!!!

    Reply
  23. Tomey
    Posted on January 10, 2017 at 00:30 Permalink

    Hi Malihu

    The anchor is working fine when i´m on my homepage.

    EX : http://www.neusscapital.com/nuevaweb/#somos-neuss

    But when i go to another page, and click in the same menu item, it goes back to the home but the scroll doesn´t works. I´ve already cliked ” enable scroll to location hash”

    Can you help me? thanks a lot!

    Reply
  24. Jamie P.
    Posted on January 6, 2017 at 20:23 Permalink

    I’ve browsed through the comments to try to troubleshoot the problem, but I still can’t seem to get things working. I feel that maybe it’s the theme that’s interfering with this script, but I can’t pinpoint the issue. Can I get help with this? Many thanks!

    Reply
    • malihu
      Posted on January 7, 2017 at 00:24 Permalink

      Indeed the theme has a script which prevents “Page scroll to id” from handling your links and page scrolling.

      The script in question is the one here:
      ...themes/bridge/js/default.min.js

      Since it’s minified, I can’t be 100% certain which code to change, but my guess is to change:
      $j(document).on("click",".main_menu a, .vertical_menu a
      to:
      $j(document).on("click",".vertical_menu a
      which is to remove the .main_menu a selector from the click function.

      After you do this, you need to give your menu links the class ps2id or the “Link Relationship (XFN)” value m_PageScroll2id as shown in the guide above.
      This is because your theme probably alters the menu internally, so “Page scroll to id” cannot be enabled on your menu links automatically.

      Doing the above should do the trick

      Reply
      • Jamie
        Posted on January 16, 2017 at 22:27 Permalink

        Hi Malihu,

        Thanks for the reply! I did all that you mention and it still seems to jump to a section rather than scroll. For some reason if I refresh the page, click around on the nav before its fully loaded Ill see the page ease in scroll to different sections but after a couple seconds it jumps to sections again.

        What do you think is the problem here?

        Thanks!

        Reply
        • malihu
          Posted on January 16, 2017 at 22:54 Permalink

          I just checked your link and page scrolling seems to work as expected. Did you fixed it or?

          Reply
          • Jamie
            Posted on January 16, 2017 at 23:51 Permalink

            I did change what you said, but it still doesnt scroll smoothly. It just jumps to section to section

        • malihu
          Posted on January 17, 2017 at 00:00 Permalink

          The link is http://thesorellegroup.com/, right?
          The page scrolls smoothly for me (tested it in Chrome and Firefox) when I click the sticky header links. Is there a chance you’re seeing a cached version?

          Also note that smooth page scrolling is not possible before the page is fully loaded.

          Reply
          • Jamie
            Posted on January 17, 2017 at 04:06 Permalink

            You my main, are a genius. And I’m a peanut. Forgot I had supercache enabled on both my chrome and safari. Tried it on Firefox and it’s all working well. Thanks so much!! I love this plugin

        • malihu
          Posted on January 17, 2017 at 18:46 Permalink

          Awesome 🙂

          Reply
  25. Han
    Posted on January 5, 2017 at 22:22 Permalink

    Hi, I’m trying to get your promising plugin working in a GeneratePress themed site, but presumably I’m overlooking something, as no smooth scrolling is happening. I created the links as described above. The site address: http://www.ambtdoesburg.nl/hart
    Thanks for your time 😉

    Reply
    • malihu
      Posted on January 6, 2017 at 04:32 Permalink

      Hi,

      Your links are currently handled by another js script which is in lines 351 to 364 of your index. This script prevents “Page scroll to id” from scrolling the page, so if you remove/comment its code, you should be able to work with “Page scroll to id”.

      You also need to create the target elements because at the moment, your theme uses a different attribute for its targets (name instead of id).

      You also have a non-existing file inclusion (jquery.malihu.PageScroll2id.min.js) in line 348 of your index (it returns a 404 console error).

      Hope this helps

      Reply
      • Han
        Posted on January 6, 2017 at 15:45 Permalink

        Thanks for answering, Malihu. I indeed tried a script I found on the GP blog, which seems to work for the moment. I’ll look into your comments to see what I did wrong when using ps2id. It seems to have more possibilities, which I obviously prefer 😉
        But thanks for now (y)

        Reply
  26. Tino
    Posted on December 31, 2016 at 08:27 Permalink

    Hi, is there any chance we can reuse the scrolling after it has been used once? I place a rel attribute to my target below in WordPress, and it seems I can only click/use/scroll once and it didn’t refresh itself.

    Reply
    • malihu
      Posted on January 2, 2017 at 22:02 Permalink

      Hi,

      The scrolling can be used infinite times, so there might be an issue with your implementation(?)
      The rel attribute should be added on the link (not the target element). Is this the case?

      If you can post your link I’d be able to see what happens and help.

      Reply
  27. Maria
    Posted on December 31, 2016 at 03:52 Permalink

    Thank you for creating this plugin; it comes recommended from a fellow Beaver Builder.

    My teenage boy wants a horizontally scrolling website to showcase his artwork. The Page Scroll to ID plugin was recommended as a compliment to WP Beaver Builder setup. I don’t seem to be setting up the menu correctly or the plugin settings to enable scrolling. I’ve tried to follow the directions, but am having trouble. Could you assist, please?

    With Gratitude,
    Maria Lara

    Reply
    • malihu
      Posted on January 2, 2017 at 22:09 Permalink

      Hello Maria,

      In order to use “Page scroll to id” in a horizontal layout, your theme has to be already laid-out horizontally. The plugin’s “Layout” option, simply tells the script that the page/template is in horizontal layout.

      “Page scroll to id” is not a theme mod/page builder where it transforms the theme from vertical to horizontal. You need to have a horizontally laid-out theme in order to make use of its horizontal scrolling.

      Is this the case with your theme? Is your theme’s layout horizontal (i.e. does it have a horizontal scrollbar)?

      Reply
  28. Alvin
    Posted on December 16, 2016 at 20:54 Permalink

    Hi again,

    Can a link be shown like a button? I mean with background color, but only when required. Like the buttons created with shortcodes.

    Regards,

    Alvin

    Reply
    • malihu
      Posted on December 17, 2016 at 11:59 Permalink

      You’d need to style the link manually via CSS or give it the class button in the text wp editor.

      If you want to have buttons that are handled by “Page scroll to id”, you could try adding their selector in plugin settings. For example:

      a)Create a button via your theme’s shortcode and give it a URL with the hash you want (e.g. #seccion-1).

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

      This way, your buttons that point to sections within the page will be handled by the plugin.

      Reply
      • Alvin
        Posted on January 2, 2017 at 13:56 Permalink

        Thanks for the information. However, when I click on the button, the scrolling isn’t smooth, it actually jump to the section. Any else that I should do?

        Regards and a very happy new year!

        Reply
        • malihu
          Posted on January 2, 2017 at 21:58 Permalink

          Happy new year 🙂

          I can’t seem to find the button… did you fixed it?
          I can see the yellow arrow which seems to work as expected.

          Reply
          • Alvin
            Posted on January 3, 2017 at 11:35 Permalink

            Hi, Please, see the related URL (test page).

            Regards,

            Alvin

        • malihu
          Posted on January 3, 2017 at 22:21 Permalink

          I checked the test page and the button element has an inline javascript click event attached. This event prevents “Page scroll to id” from scrolling the page to the target and it’s probably added by the theme(?)

          I don’t know how you added the button or if there’s a setting to remove such events from it but maybe you could add such button manually in the editor?

          <a href="#seccion-1" class="button small">DESCRUBRE EL CONTENIDO</a>

          Reply
          • Alvin
            Posted on January 4, 2017 at 11:58 Permalink

            Hi, thanks for a quick answer. The code works great! About the button, I added it via a shortcode provided with the WP theme. Best regards.

  29. Alvin
    Posted on December 14, 2016 at 16:10 Permalink

    Hi there, I’d appreciate whether you could tell me if such a menu as explained in this video (https://www.youtube.com/watch?v=kB7GmchMum8) can be done with my website. Specifically, to scroll to the top of each content builder block. I looked at the code, but I can’t find the id for the blocks. Best regards, Alvin

    Reply
    • malihu
      Posted on December 14, 2016 at 18:36 Permalink

      You could create your own targets for each section by using plugin’s shortcode, e.g.:
      [ps2id id='section-1'/]
      See “Creating target sections in the editor via shortcodes” above for more info.

      I don’t know how your theme uses the WordPress post/page editor but you’d normally be able to use the shortcodes.

      Reply
      • Alvin
        Posted on December 15, 2016 at 02:14 Permalink

        Thank you for a quick reply. I tried what you replied, but some sections (most of them) have a background image with a text header and a text block. When I add the shortcode in the text block, the browser scrolls to the begin of the text block, not to the top border of the background image which corresponds to the section top border. I also tried to use offset, but that works well for desktop, not for mobile view. Any idea? Regards, Alvin

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

          Can you add custom CSS in your theme? If yes, try doing the following for each of your sections:

          1. Add the target shortcode in your text block(s) as you’ve done.

          2. Add the following CSS rule to your theme:

          .page_content_wrapper .inner a[data-ps2id-target]{ position: absolute; top: 0; }

          Reply
          • Alvin
            Posted on December 16, 2016 at 12:21 Permalink

            Hi, it works great. Thanks!

  30. Greg
    Posted on December 12, 2016 at 05:51 Permalink

    Hi,

    I am building a website using the new Twenty Seventeen WordPress theme. My site layout looks like this demo site: http://2017.wordpress.net/
    I used the shortcode “Insert Page scroll to id target” on my page sections, and in the plugin settings I set the offset as “.navigation-top” to deal with the sticky menu. The plugin works ok in the full screen (sticky menu), but there is too much offset on the mobile version due to the fact that toggle on menu (mobile menu) is much longer than the sticky menu. Do you have any advice how to properly set up the offset in this theme? The offset is not necessary in the mobile version because the mobile menu is not sticky. Thank you.

    Reply

Comments pages: 1 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