Page scroll to id for WordPress tutorial
Basic tutorial for using “Page scroll to id” WordPress plugin on your WordPress site.
- Creating id targets
- Creating links
- Links highlighting
- Offset scrolling for sticky menus
- Scrolling from/to different pages
- Video tutorial
In order to use the plugin on your WordPress site (after installing and activating it), you need to do the following:
- Create id targets the page will scroll to or find existing id attributes in your theme to use with your links.
- 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 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 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.
Create id targets using headings and “HTML Anchor” field
If you use headings in your content, you can use the “HTML Anchor” attribute of the heading block to set its target id. Select your heading, click “Advanced” in the right panel and insert the target id you want in the “HTML Anchor” field. See detailed tutorial.
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 plugin’s “Page scroll to id target” block
The plugin has its own custom block for inserting targets: “Page scroll to id target”
Creating id targets in post visual editor (classic “old” editor)
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.
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
Creating links in WordPress Menus

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
).
Creating links in post block editor (Gutenberg)
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.
Creating links in post visual editor (classic editor)
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.

#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.
Creating links in post editor via shortcodes
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.
Creating links manually
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>
Enabling the plugin on links that already exist in your site
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
- How do I make my links work from any page in my site?
- Can I have links with different offsets?
- How to make the plugin work with WordPress Menu links?
- Can I have links with different scroll duration/speed?
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
- How do I make my links stay highlighted for longer distance while scrolling?
- Multiple links get highlighted! How to highlight only one?
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
).
Hey,
I’ve another quick question, Can we use both vertical and horizontal scrolling at a time on the same page?
Looking forward to your response.
Thanks
Yes, by using the “auto” value in “Page layout” option in plugin settings.
Hey,
Hope you are doing great!
I would like to use your plugin to swipe the slider from left to right and up to down by finger touch on mobile.
Like as when clicking over the section buttons, it jumps to the exact next slide but while we swipe with a finger on mobile. it doesn’t jump over the next slide.
Could you please confirm to me if this feature is part of your plugin? I’m checking with the demo.
http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html
Your prompt reply would be highly appreciated.
Thanks
Hi,
No, this is not part of the plugin. You might need to take a look at the script below, which you can use along with “Page scroll to id”:
http://manos.malihu.gr/page-scroll-to-id-with-mousewheel-and-keyboard/
You also need to know that the plugin works by scrolling the actual page (vertical and/or horizontal). It cannot scroll a slider or elements with their own scrollbar (see related FAQ).
Hope this helps
Great plugin!
I’m using this to highlight the menu items in a sidebar, So as the user scrolls to the id the highlight shows in the sidebar.
My sidebar has multiple levels:
Parent
child
subchild
At the moment the highlight only works on the parent. Would you be able to tell me if it’s possible to highlight the child and subchild too and if so how please?
Thanks
If your child/subchild links point to a child/subchild section, they will get highlighted. Are your child/subchild items links that point to child/subchild targets?
Yes they are, This is why i am confused with you it’s not highlighting
I’d need to see your site/page in order to help. Can you post your URL?
Hi,
I have actually got it working now, Thank you!
I ask if there’s a way to have 2 highlight classes? One I can assign to the child and one to the subchild?
I ask this because I have selected ‘Allow only one highlighted element at a time’ as sometimes 3 subchildren will highlight if they’re in view, However having this ticked then means my child wont be highlighted too.
There are times when I need the child to be highlighted as well as the subchild but I only want 1 subchild to highlight not the 3 in view.
The plugin does not provide 2 highlight classes but you might be able to do it using the
.mPS2id-highlight-first
and.mPS2id-highlight-last
classes (you’ll need to disable “Allow only one highlighted element at a time” option to see these classes applied) in combination with.mPS2id-highlight
class.The thing is that I can’t provide any CSS rules without seeing your page/site in action.
Let me know if you can post or maybe send me your URL.
Hello,
I’m using a sticky bar for navigational purposes and I was wondering if instead of the section being highlighted, could the letters appear in bold instead?
Thanks!
Hi,
See my reply in support forums:
https://wordpress.org/support/topic/is-there-a-way-to-remove-the-highlight-and-use-bold-instead/#post-13446473
Hello! Love the plugin, but I’m having some issues with the highlighting of the links.
I have a one-page nav menu (WordPress menu) with anchors to different sections on one page and all of the menu items appear to be highlighted at all times when I’m on that page!
I’ve tried enabling the “Allow only one highlighted element at a time “and the “Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)” options but it doesn’t seem to work. All my “Home” menu items are highlighted when I’m at the home page, all my “Results” items are highlighted when I’m in the results page.
Can you please help me? Thanks!
Hello,
The highlight you see is done by your theme (not the plugin). It’s common for themes to highlight same-page menu items, so that’s what happens here.
To revert this and use plugins highlighting, use the following CSS:
header .navbar ul li .sub-menu li.current-menu-item a._mPS2id-h:not(.mPS2id-highlight):not(:hover){ background-color: inherit !important; color: inherit; }
Let me know if it worked
Yes, it worked! Thank you so much 🙂
Hello!
I’ve been using this wonderful plugin for months, but now I have had this problem for a few weeks: when I click on a link, scrolling behaves like this:
1. it begins to flow smoothly
2. the scrolling freezes for a few moments before reaching the target (where it stops depends on how far the target is within the page: the target is distant within the page, the more this effect is visible)
3. then it finally reaches the target
I don’t know if I managed to explain myself, but using the site it is very visible.
What could be the reason?
Thanks for the support!
Alex
Hello,
The reason for the issues you’re having is because of lower performance when the links in your page get highlighted.
It seems that there are over 150 links that get highlighted in the page. You need to set which ones you actually want to get highlighted by the plugin.
Go to plugin settings and set the “Highlight selector(s)” value to:
#menu-lato a
Click save changes and test your page.
In addition, another script is highlighting your aside menu links (blue border and dark text). I can’t really say which one is it as it’s inside your
wp-content/uploads/siteground-optimizer-assets directory
but it seems to also have a performance impact on the page.If you only use this script (with the class
.accendi
) to highlight you links, you could disable “Page scroll to id” highlight feature (since you’re not using it) by setting “Highlight selector(s)” option value to:.nothing
Hope this helps
Hi,
I am using the plugin in a template. ID’s are same for all the targets but for url, ofcourse it will be changed for every page using that template. How to deal with this please?
Hi,
I’m not sure I understand the issue but you can use any type of URL in your links.
If for example your targets are the same on every page, you can have links in the form of
#buy
,#rent
etc.If your targets are on a specific page, you can have links with absolute URL like
https://gharfirst.com/#homepage-section
,https://gharfirst.com/some-page/#some-page-section
etc. or relative-absolute URL like/#homepage-section
,/some-page/#some-page-section
etc.Hope this helps
Hi,
Help me please!
my website is http://www.elektragraphics.com, i used page scroll to id plugins it works on desktop version but when i check on mobile screen i was unable to scroll website till footer. Its stuck and bouncing.
Hi,
I don’t think the plugin has something to do with this issue. What happens when you temporarily deactivate “Page scroll to id”? Can you scroll to the footer?
You also have another script in your theme that produces a js console error when scrolling the page. Maybe this is causing the issue(?)
The theme script is:
...themes/the-monday/js/smoothscroll.js