The plugin works by "connecting" links with href/URL in the form of #my-id
or http://my-site.com/page/#my-id
to sections/elements within the document with an equivalent id attribute value (e.g. <div id="my-id">...</div>
). Clicking such links will scroll the page smoothly to their target id position.
Get started by creating or setting-up your links. The plugin is enabled by default on WordPress Menu links (created in Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to (e.g. #my-id
, /page/#my-id
, http://my-site.com/page/#my-id
etc.).
You can use id values that already exist in your theme or you can create your own id targets using plugin's "Insert Page scroll to id target" button in wp post visual editor or the [ps2id]
shortcode (e.g. [ps2id id='my-id'/]
).
To create links within your content, use plugin's "Insert/edit Page scroll to id link" button and/or shortcode (e.g. [ps2id url='#my-id']link text[/ps2id]
) in wp post visual/text editor.
To enable the plugin on existing links, add the ps2id
class or the m_PageScroll2id
rel attribute to them, making sure the link's href/URL value contains a hash (#
) with the id of the section you want to scroll-to. In addition, you can simply add your links CSS selector (e.g. .menu-item a
, a[href*=#]:not([href=#])
etc.) in "Selector(s)" field in plugin settings.
To highlight your links (or targets), use the classes provided by the plugin in your theme's stylesheet or custom CSS. The default highlight class is mPS2id-highlight
but you can set your own in the "Classes & highlight options". For example, to style the highlighted link (the link whose target element is considered to be within the viewport), you could add in your CSS:
a.mPS2id-highlight{ background: #ff0; }
or .menu-item a.mPS2id-highlight{ background: #ff0; }
for highlighting custom menus links only.
If you have a fixed-positioned/sticky menu which overlaps your target's content when page scrolling is completed, insert your menu CSS selector or a fixed pixel value in the "Offset" field. For example, inserting #navigation-menu
will offset the scroll-to position according to the height/width/position of the element with id navigation-menu
. In the same manner, setting the "Offset" value to 100
will offset page scrolling by 100 pixels.