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

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 id="section-2">
  <p>Section 2 content...</p>

<div id="section-3">
  <p>Section 3 content...</p>
<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.


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,, /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. 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,, /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:

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


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.


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.

Video tutorial


Post a comment

Comments pages: 1 6 7 8

  1. Murugan
    Posted on February 6, 2019 at 18:23 Permalink

    Hi . . Thanks for the plugin. I want add some margin-top : 40px; on the target content. How to apply this.?

    Because if i click one target link that time the target content 30px hide by my menu bar. so i want use maring-top on the target content. Help me.

    • malihu
      Posted on February 6, 2019 at 23:51 Permalink


      You can do this by using the plugin’s offset option. Go to plugin settings and set the “Offset” option to:


      Alternately, you can give your target element a top padding (not margin). For example:

      #your-id{ padding-top: 40px; }

  2. Thor
    Posted on January 21, 2019 at 14:21 Permalink

    Any chance for a guide for Elementor? I want to use this when clicking an icon (which jumps to an anchor link), not from the WordPress menu.

    • malihu
      Posted on January 21, 2019 at 22:10 Permalink

      For Elementor, go to plugin settings and make sure the “Selector(s)” option value is:


      and also that “Prevent other scripts from handling plugin’s links” option (under “Advanced options”) is enabled/checked.

      If your icon is an actual link, the plugin should work. If you send me your link I’d be able to check it and help.

      • Christina
        Posted on February 1, 2019 at 14:01 Permalink

        Hi ,
        Actually im using Neve WordPress theme, were its a parallax website and im unable to add menu to scroll page, though i put #section id after link its not working. Kindly suggest me how exactly i can insert menu in that theme. thank you.


        • malihu
          Posted on February 2, 2019 at 11:43 Permalink


          I’m guessing you what to make your “Focus” link scroll the page, right?

          If yes, you need to add a target with id focus in your page. Currently there’s no focus target in the document.

  3. Karen
    Posted on January 2, 2019 at 22:37 Permalink

    I love this plugin but have always abandoned it because I can’t seem to get the offset to work correctly.

    My sticky menu changes height w different screen sizes and is set with a class selector, not an id.

    I’ve tried using px in the offset settings, but that doesn’t work and using .site-header doesn’t seem to work either.

    Any suggestions? I’m about to scrap it again!

    Thanks so much,

    • malihu
      Posted on January 7, 2019 at 00:17 Permalink

      Your theme seems to be using its own scrolling functions that prevent “Page scroll to id” from doing its thing. That’s why offset doesn’t work. Try this:

      Go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

      Let me know if it worked

  4. AT
    Posted on December 12, 2018 at 23:52 Permalink

    Hi Malihu,
    Thank you for this plugin and your support!
    I am using beaver builder for the site. The menu links work for all the sections but I cannot get the menu to highlight when scrolling up and down.
    Also if its possible to get the menu bold and highlight when scroll up or down that would be great. Of curse I’m doing something wrong..
    Here is the site
    https: // www. taifinancialconsulting. com

    Appreciate your input.
    Thank you

    • malihu
      Posted on December 23, 2018 at 14:10 Permalink


      You need to change the CSS selector you added from:

      #menu-main .current-menu-item a.mPS2id-highlight


      #menu-main a.mPS2id-highlight

      so all menu items get highlighted.

  5. Enrico
    Posted on November 28, 2018 at 17:56 Permalink

    Hi is possible use your plugin with the mouse wheel?
    Going up and down scrolling the wheel jumping from one section to another?
    Thank u

  6. Sonja
    Posted on August 29, 2018 at 08:14 Permalink

    Thanks for the plugin, I followed your tutorial but can’t get it to work for some reason.

    The page I’m working on is

    Are you able to check & let me know if I’m doing something wrong?

  7. Nazar
    Posted on August 26, 2018 at 12:27 Permalink

    Help me please!
    The problem is that two menu items are highlighted at once. It is necessary to highlight only one of them while scrolling through the page
    how to fix:
    I use: Elementor Pro, Astra, Page scroll to id

    • Nazar
      Posted on September 2, 2018 at 16:53 Permalink

      changed the theme to OceanWP

  8. Dominik
    Posted on August 22, 2018 at 11:46 Permalink

    I´m already big fan of this awesome plugin! My only problem is hightlighting. The menu items don´t highlight or change any classes. By clicking them it is working. It´s just the thing with recognize the content in the viewport. Can you help me please?


Comments pages: 1 6 7 8

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>