WordPress.org

Ready to get started?Download WordPress

Plugin Directory

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?

While on the 'Menus' admin page, click 'Screen Options' and check 'Link Relationship (XFN)'. To enable the plugin on a menu item, 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).

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

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

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: 3.9
Last Updated: 2014-4-17
Downloads: 14,889

Ratings

5 stars
5 out of 5 stars

Support

7 of 24 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

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

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