Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Page scroll to id

Page scroll to id is an easy-to-use jQuery plugin that enables animated page scrolling to specific id within the document.

How to use the plugin with WP custom/native menus?

Check "Enable on WordPress Menu links" in plugin's settings to automatically enable the plugin on your WordPress menus custom links. If you prefer to do it manually, while on the 'Menus' admin page, click 'Screen Options' and check 'Link Relationship (XFN)'. To enable the plugin on a menu item (added to menu via 'Custom Links' panel), click the arrow on the right of the item and insert m_PageScroll2id in the 'Link Relationship (XFN)' field (assuming your menu contains links with URL value in the form of #id). Alternately, you can simply add the value ps2id in 'CSS Classes' field.

How to use the plugin without editing my theme's markup?

In plugin's configuration page ('Settings > Page Scroll to id' menu in WordPress), you can change the Selector(s) field value to existing matching sets of elements in your theme. For example: a.class-name, #id a, a[href*='#'] etc. For multiple selectors, use comma separated values: e.g. a[rel='m_PageScroll2id'], a.class-name.

What if my links have rel values already set by the theme or other plugins?

You can add the m_PageScroll2id in your link's rel attribute (along with the other values) and change the Selector(s) field value to a[rel~='m_PageScroll2id'] in plugin settings.

How do I highlight current menu items?

The plugin provides a ready-to-use class for styling highlighted links (the links whose target element is considered to be within the viewport). The default highlight class is mPS2id-highlight, so you can use it in your theme's CSS to style current menu items, e.g. .menu-item a.mPS2id-highlight{ background: #ff0; }.

More than one links are highlighted! How to highlight only the first one?

Use the mPS2id-highlight-first class in your stylesheet (instead of just mPS2id-highlight). This class is added by the script on the first link whose target element is considered to be within the viewport, e.g. .menu-item a.mPS2id-highlight-first{ background: #ff0; }. Alternatively, enable 'Force single highlight' option in plugin settings.

How to keep my links highlighted when my target elements have 0 height?

Enable 'Keep highlight until next' option in plugin settings, which keeps the current highlighted element on until the next one comes into view.

When I click the link, nothing happens...

Make sure your link has href value # with the id of the section you want to scroll-to (e.g. <a href="#id" rel="m_PageScroll2id">link</a>) and a section with such an id exists in your page (e.g. <div id="id">target</div>).

How do I make my links work from other/different pages

To make your links work from any page, you need to add the full address in your links href (instead of just the hash with the id). For example, you'll need to change <a href="#id" rel="m_PageScroll2id">link</a> to something like <a href="http://mysite.com/some-page/#id" rel="m_PageScroll2id">link</a>. The same applies for your WP custom menus. You'll need to insert the full address in the URL field. To enable page scrolling to URL location hash on page load, check Scroll to location hash in plugin settings.

The page doesn't scroll exactly where I want

The scroll-to position is the top position of your target element. Your target's top position does not include its margins, so make sure to check your element's actual position via your browser's developer tools and change your CSS if needed. You can also offset the scroll-to position by setting an offset value (in pixels) in plugin's settings.

The page doesn't scroll to the very top

Your target element is probably not at the very top (check its position via your browser's developer tools). If your link has href value #top and no target with id top exists in your page, the plugin will automatically scroll the page to the very top (the position of the body tag).

How to prevent my fixed navigation menu overlapping the content?

Insert your menu selector in the Offset field in plugin settings. For example, if you have a fixed menu with id navigation-menu, set Offset to #navigation-menu in order to stop page scrolling below it and avoid overlapping your content.

Can I set different vertical and horizontal offsets?

Yes, by inserting comma separated values in Offset field For example 100,50 will set vertical offset to 100 and horizontal offset to 50 pixels.

Can I specify link specific offset values?

Yes, by adding the html attribute data-ps2id-offset to a link. For example, <a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a> will offset scroll-to position by 100 pixels. You may also use the ps2id shortcode to create links with specific offsets, e.g. [ps2id url='#id' offset='100']link[/ps2id].

How do I disable the plugin on small screens?

Use the 'Disable plugin below screen-size' option in plugin settings. You can set a minimum width,height value required in order to enable plugin functionality.

Can I use the plugin to scroll an overflowed div?

No. The plugin scrolls the entire page (the document's root element) so it works correctly highlighting links, alongside deep linking plugins etc. with mouse and touch events.

Do you support Internet Explorer 7?

No. IE7 usage is non-existent.

Does the plugin offer user defined callbacks, scroll-to method or some other advanced feature?

Yes but you probably need to implement the plugin in your theme manually. See Plugin homepage for more info.

Requires: 3.3 or higher
Compatible up to: 4.7.1
Last Updated: 1 month ago
Active Installs: 40,000+


4.9 out of 5 stars


11 of 18 support threads in the last two months have been marked resolved.

Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

0,1,0 100,1,1
100,1,1 100,3,3
100,1,1 100,2,2 100,1,1
100,1,1 100,1,1
100,1,1 100,1,1