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

Page scroll to id for WordPress tutorial

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

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

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

Creating id targets

Creating id targets in post visual editor

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

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

Creating id targets in post editor via shortcodes

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

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

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

Click here for more info on target shortcodes

Creating id targets in HTML

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

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

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

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

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

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

Creating id targets in WordPress widget areas

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

FAQ

Divi WordPress Theme

Creating links

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

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

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

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

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

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

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

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

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

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

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

FAQ

Links highlighting

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

Common case scenario and example

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

.memu-item a{ 
    color: black; 
}

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

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

Notes and more info

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

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

FAQ

Offset scrolling for sticky menus

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

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

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

Scrolling from/to different pages

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

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

Video tutorial


537 Comments

Post a comment

Comments pages: 1 4 5 6

  1. Tariq
    Posted on September 13, 2017 at 10:24 Permalink

    Hello,

    I have a multiple pages website, I am using visual composer to edit my pages,

    the deal is i want to use page scroll id plugin for one single page & i dont want to use it in the menu instead i want to use it in the buttons on that page

    is there a way to do it

    Please help

    Thanks in Advance

    Reply
    • malihu
      Posted on September 15, 2017 at 01:21 Permalink

      Visual composer allows you to enter an id on any composing block/element you choose (visual composer has an id field for almost all elements).

      You can then enable “Page scroll to id” to handle any kind of link by adding:
      a[href*=#]:not([href=#])
      to “Selector(s)” field in plugin settings. See here for more info.

      Reply
  2. Murali
    Posted on August 31, 2017 at 17:37 Permalink

    Hello, friend, your tutorial helps a lot two days onwards my mind is blowing. Thanks a lot.

    Reply
  3. John Merlo
    Posted on August 2, 2017 at 04:52 Permalink

    On the home page of http://www.airpurifiercritic.com/ I have this at the top [ps2id id=’some-id’ target=”/] and this at the bottom Back to Top it is not going to the top of the page what am I doing wrong?

    Reply
  4. walter
    Posted on July 25, 2017 at 01:05 Permalink

    Hello, I have a button in a slider. I installed the plugin and created the anchor ID but the action jumps.
    This is the code in the slider:

    [tx_vslider height=”100″ reduct=”130″ vurl=”https://www.youtube.com/watch?v=oUUvK9WUves&feature=youtu.be” overlay=”vignette” bgurl=”http://lacasadecarton.edu.pe/prev/wp-content/uploads/2017/06/slide04.jpg” attachment=”fixed” bgsize=”cover” imgurl=”http://lacasadecarton.edu.pe/prev/wp-content/uploads/2017/06/3.png” title=”” linktext=”” linkurl=”#1984″]Formamos personas solidarias, buscadoras de verdad, libres y creativas para una sociedad democrática y un mundo ecológicamente viable.[/tx_vslider]

    and this is the CSS for the button:

    .vslider_button, .vslider_button:visited {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    padding: 0px 48px;
    color: #FFF;
    text-transform: uppercase;
    background-color: #333;
    opacity: 0.8;
    text-decoration: none;
    font-family:FontAwesome;
    font-size:40px;
    }

    What is worng?

    Thanks for your time!

    Reply
    • malihu
      Posted on July 25, 2017 at 02:44 Permalink

      I saw that you fixed the issue by adding the global selector a[href*=#] in “Selector(s)”, correct?

      Reply
      • walter
        Posted on July 25, 2017 at 22:44 Permalink

        Yes my friend, finally I found the solution in an old response of yours! Thanks for your time.

        Reply
  5. Georgia
    Posted on July 22, 2017 at 18:53 Permalink

    Hallo I use page scroll to id plugin for wordpress but I have a multilanguage site and I can not change the title of the section to the second language. Is there another way to fix this with costum code? Thank you

    Reply
    • malihu
      Posted on July 23, 2017 at 02:08 Permalink

      Hello,

      I’m not sure how you translate posts(?) What multilingual plugin are you using and how you create the targets?

      Reply
  6. victor
    Posted on July 14, 2017 at 10:34 Permalink

    Hi there.

    Thanks a lot for this plugin.

    I wonder if is normal page reloads before scroll to section. I didn’t saw that in your video tutorial.

    Do you know what could be the problem? Can you help me?

    Thanks in advance.

    Regards.

    Reply
    • victor
      Posted on July 14, 2017 at 10:54 Permalink

      Edited:

      I changed the “Selector(s)” field to:

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

      but it is the same.

      I put class ps2id in “CSS Classes” field at menu but no way.

      I tried the option “Prevent other scripts from handling plugin’s links (if possible)” but it seems the same.

      Any ideas?

      Thanks.

      Reply
      • malihu
        Posted on July 14, 2017 at 11:56 Permalink

        Make sure your links URL matches exactly the URL you see in browser’s address bar (e.g. missing the www part or having https).

        Reply
        • victor
          Posted on July 17, 2017 at 20:12 Permalink

          Hi malihu

          Yep, it works! Thanks for your quickly answer!

          Regards

          Reply
  7. Hitmilk
    Posted on June 30, 2017 at 20:10 Permalink

    Hej Malihu!
    Glad that i found your plugin – looks like it’s what i’m looking for a long time.
    But – like often, it won’t work like i really want – don’t know if i’m wrong with my work.
    Would be great if you could have look here: http://www.faktoffice.com (pw: 1234)

    Shortly said: we got five pages – and want to use the horizontal slide effect between the menu-points, that the page feels like “one big canvas”. Would be great if you could have look.
    Maybe deeper in the backend (if you want), i really like to donate for your plugin, if it works – because we appreciate a lot.

    Best from Berlin,
    Hitmilk

    Reply
    • malihu
      Posted on July 1, 2017 at 01:58 Permalink

      Hello Hitmilk,

      The “Page layout” option does not transform your theme’s templates layout. In other words, it won’t change your theme/page design from (the standard) vertical to horizontal.

      This option simply informs plugin’s script that you want to scroll in a specific direction (vertical, horizontal or both).

      Your theme’s layout is currently vertical. You’ll need to either get a horizontal layout theme or create one manually (via CSS). You could use the markup and CSS of the horizontal demo as a basis if you want.

      Hope this clarifies what the option does.
      I don’t think you’ll be able to find a plugin that turns vertical themes to horizontal, as such layouts are completely depended on theme’s markup, CSS and the content itself.

      Reply
  8. Bree
    Posted on June 26, 2017 at 17:42 Permalink

    Hi,

    I’ve tried configuring your plugin but it doesn’t seem to be scrolling at all. I’ve tried using the link attribute ‘m_PageScroll2id’ but it just keeps jumping.

    I’m trying to get it to scroll to the bottom when you click on ‘contact us’ on the top nav. There is an ID of #enquire in that section. Are you able to tell me if there’s anything wrong?

    Thanks

    Reply
    • malihu
      Posted on July 1, 2017 at 01:47 Permalink

      Hello,

      The plugin does not seem to be activated in your theme (plugin’s frontend scripts are not included in your HTML).
      Is the plugin activated?
      Does your theme have wp_head() and wp_footer() functions? These functions are required for the plugin to work (in fact, most plugins won’t work without them).

      Reply
  9. Andreas
    Posted on June 21, 2017 at 15:04 Permalink

    Hi,

    I’m trying to change the menu item text colour on scroll instead of highlighting the whole item using your plugin.

    i added the bellow css code to my style.css
    i have set ps2id at the menu item classes

    background: yellow; => works fine
    color: red; => not working

    a.mPS2id-highlight{
    color: red;
    background: yellow;
    }

    Any help would be appreciated.

    Regards,

    Andreas

    Reply
    • malihu
      Posted on June 22, 2017 at 00:10 Permalink

      Another CSS rule from your theme’s stylesheet is probably overwrites the a.mPS2id-highlight color rule you’ve set.

      You should try making your CSS selector more specific (e.g. .menu-item a.mPS2id-highlight is more specific than the one you’ve set). You can read about cascading order and inheritance in CSS here if you want.

      It’s impossible for me to know what selector to put as I don’t have your site URL in order to check it via browser’s developer tools. If you can post your site link, I’d be happy to help.

      Reply
  10. Kristine Silverstein
    Posted on June 21, 2017 at 07:10 Permalink

    Hello!

    This used to work perfectly for my site, but suddenly it has quit working and I cannot figure out why.

    Example: My page won’t scroll to the link below.
    http://www.hillcountryclassicaustin.org/new/#home-section-3 (“Sponsor” in the navigation menu)

    Please advise.

    Thanks so much!
    Kristine

    Reply
    • malihu
      Posted on June 21, 2017 at 08:19 Permalink

      Hi,

      It’s not “Page scroll to id”. Have you installed any new plugin(s)?

      I opened your site with Chrome developer tools and I get console errors coming from the following script (i.e. “J Shortcodes” plugin):
      http://www.hillcountryclassicaustin.org/new/wp-content/plugins/j-shortcodes/galleryview/js/jquery.easing.1.3.js

      The “J Shortcodes” plugin produces js errors that prevent other code from working. I don’t think you should use this plugin. It was last updated 4 years ago!

      Reply
  11. rakesh
    Posted on June 12, 2017 at 23:20 Permalink

    Hi sir !

    Great work i am using your plugin for shadow wordpress theme

    1)it scroll on same page to section id’s but i am not able to Scrolling from/to different pages

    2) we are using sticky header

    Please help help us sir

    thanks

    Reply
  12. khaled mamdouh
    Posted on June 10, 2017 at 01:53 Permalink

    Thanks bro 😉

    Reply
  13. Suresh
    Posted on June 5, 2017 at 08:12 Permalink

    My blog is a list of events for the month. I would like to scroll to the current date inside the document automatically on load.

    Is this possible?

    Reply
    • malihu
      Posted on June 5, 2017 at 22:05 Permalink

      This cannot be done automatically. The plugin has the ability to scroll programmatically but you’d need to develop a custom js script and call plugin’s scrollTo method on the id of the current date event. You’d need a web developer to do this.

      Reply
  14. Martin
    Posted on June 4, 2017 at 00:30 Permalink

    Hello Sir! I love your plugin! Thanks so much for it! Quick question though. If I add menu item that points to, for example #portfolio it does not scroll, it jumps, when I put in the whole site name+#portfolio it reloads the page and then scrolls smoothly. Is there any way to make it work so it scroll without reloading the website?

    My website would be: http://www.jagnaniedzielska.pl (actually its my girlfriends site)

    Thanks so much! Any help would be appreciated!

    Reply
    • malihu
      Posted on June 5, 2017 at 21:52 Permalink

      The plugin is not enabled on your menu links. See the following FAQ for more info and why this happens:
      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-14

      The easiest way to enable it is to go to plugin settings and change the “Selector(s)” field to:
      a[rel='m_PageScroll2id'], .menu-item a[href*='#']
      Click “Save Changes” and test 😉

      Reply
  15. Tamil
    Posted on June 2, 2017 at 12:57 Permalink

    Hi , thanks for your great plugin, but when i install it , i cant able to see the options in the editor to insert the code

    Reply
    • malihu
      Posted on June 2, 2017 at 14:56 Permalink

      Hi,

      Do you mean you can’t see the plugin’s insert link/target buttons in WordPress post/page editor?

      If yes, you’re probably using a site builder like “Siteorigin page builder”(?) Some builders do not allow custom buttons in the editor’s toolbar.

      You can always use plugin’s shortcodes though. See here:
      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-shortcodes

      Reply
  16. Christopher
    Posted on May 19, 2017 at 20:39 Permalink

    Hi there –

    I have implemented your great plugin on my site, and it seems to be working selectively. I have coded the links the same way on my site, yet only half function.

    When selecting a location (Atlantic, Western, Ontario, Quebec) – the anchor just jumps to it’s location. However, when you press Back to Top, it scrolls perfectly.

    Any idea on the issue at hand? Thanks in advance.

    Reply
    • malihu
      Posted on May 19, 2017 at 20:50 Permalink

      Hello,

      Your target elements (for “ATLANTIC”, “QUEBEC” etc.) do not have id attributes. The elements use the (deprecated) name attribute which will not work with “Page scroll to id”. You need to change the name to id attribute or create the targets via plugin’s button/shortcode.

      Reply
      • Christopher
        Posted on May 19, 2017 at 22:06 Permalink

        Wow – thanks for catching that. I’m not even sure how the name tag was used.

        Works great now. Thanks for the prompt reply, and solution. I’ve been starting at a screen for too long!

        Cheers.

        Reply
        • malihu
          Posted on May 20, 2017 at 01:44 Permalink

          You’re welcome 🙂

          Reply

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