Page scroll to id for WordPress

The default selector value is a[href*='#']:not([href='#']), meaning the plugin handles all links that have a valid hash value (e.g. #id) in their URL.
The default selector value prior to version 1.6.3 of “Page scroll to id” is a[rel='m_PageScroll2id'], meaning the plugin handles by default all anchor elements (a) with m_PageScroll2id rel attribute value.

Other selector examples could be: a[href*='#'] (links that contain # in their href/URL attribute), a[href='#my-id'] (links with href attribute value: #my-id), a.className (links with class: className).

To enable the plugin on any link that has a hash (#) in its URL, insert a[href*='#']:not([href='#']) as a single selector.

Other default selectors which the plugin is applied automatically include the class ps2id (actual selectors: .ps2id > a[href*='#'] and a.ps2id[href*='#']). This means that any link with a hash in its URL/href (e.g. #my-id) which has the class or is contained (direct children) within an element with the class ps2id will be handled by the plugin automatically.

To exclude specific links from being handled by the plugin (e.g. special tabs, accordions, toggles etc.), use the selectors are excluded field by adding the element selector(s) you want (separated by comma). The default excluded selectors value is set to: a[href^='#tab-'], a[href^='#tabs-'], a[data-toggle]:not([data-toggle='tooltip']), a[data-slide], a[data-vc-tabs], a[data-vc-accordion], a.screen-reader-text.skip-link which excludes most links that are used for toggling elements, tabs, accordions etc.

You can add your owns electors to exclude by separating each one with comma (,), for example:
a[href^='#tab-'], a[data-toggle], a.some-class, .tabs a

The option “Enable on WordPress Menu links” (enabled by default) enables the plugin automatically on custom links created in WordPress Menus.

“Auto-adjust scrolling duration” option (enabled by default) lets the plugin fine-tune scrolling duration/speed according to target and page scroll position. This normalizes the animation duration in order to avoid short-distance scrolling taking too long (e.g. a page scroll of just 100 pixels will last shorter than the value specified in “Scroll duration”).

Scroll duration and easing demo

To set different vertical and horizontal offsets (e.g. when Layout is set to auto), add comma separated values in Offset field, e.g. 100,50 (vertical offset 100 pixels, horizontal offset 50 pixels).

The plugin offers selector expressions in order to define more advanced offset values. Examples:

• :fixed and :sticky expressions – Offset by element with id “some-id” and CSS position fixed or sticky: #some-id:fixed or #some-id:sticky
  Assuming vertical layout, the value above will offset scrolling according to the height of #some-id element (i.e. the element that has id some-id), but only when this element CSS position is fixed or sticky (i.e. when element is sticks to the viewport when scrolling the page). This is useful when for example you have a navigation menu that is sticky/fixed only above a specific viewport size (e.g. only on desktop).
• :height() expression – Offset by element with class “some-class” and height equal to 100 pixels: .some-class:height(100)
  The value above will offset scrolling according to the height (on vertical layout) of .some-class element (i.e. the element that has class some-class), but only when this element height is exactly 100 pixels.
• :width() expression – Offset by element with id “some-id” and width greater than 800 pixels: #some-id:width(>800)
  The value above will offset scrolling according to the height of #some-id element, but only when this element width is greater than 800 pixels. This is useful when having responsive navigation menus. For instance, you might have a responsive top sticky menu that switches to a “hamburger” menu when viewport is 800 pixels wide or less. Assuming the menu is as wide as the page/viewport, you’d only want to apply its height as offset when its width is greater than 800 pixels (i.e. when it’s not “hamburger” menu). Adding: #your-menu-id:width(>800) as the offset value will do exactly that.
• Multiple expressions – Offset by element with id “some-id”, CSS position fixed and height between 50 and 100 pixels: #some-id:fixed:height(>50):height(<100)
  The value above will offset scrolling according to the height of #some-id element, but only when this element CSS position is fixed and its height is anywhere between 51 and 99 pixels.

The plugin can generate automatically a hidden element that can be used as the offset selector. If you enable Auto-generate #ps2id-dummy-offset element option, you can use the #ps2id-dummy-offset as the “Offset” option value and then in your CSS by giving it a height equal to the amount of offset you want.

For example, say you want to have an offset of 100 pixels on desktop and 50 pixels on smaller screens (i.e. mobile). You should enable the Auto-generate #ps2id-dummy-offset element option, set the value #ps2id-dummy-offset in the “Offset” option field and add the following to your CSS:

#ps2id-dummy-offset{
  height: 50px;
}
@media only screen and (min-width: 768px){
  #ps2id-dummy-offset{
    height: 100px;
  }
}

The plugin highlights by default all the links it handles. Using this field, you can specify which links should be highlighted and exclude the rest.
For example, assuming you have various links that scroll the page (e.g. menu links, back-to-top etc.) and you want only the menu links to get highlighted, you could insert:
.menu-item a[href*='#']

• When a link is clicked, it gets the mPS2id-clicked class.
  You can change this class name to your own and you can use it in your CSS to style the clicked link. For instance:

  .mPS2id-clicked{ 
      background: #ff0; 
  }
  

• When a link’s target element is within the viewport (i.e. visible on the screen), the link gets the mPS2id-highlight class and the target element gets the mPS2id-target class.
  You can change these class names to your own and you can use them in your CSS to style the highlighted link and target. For instance:

  .mPS2id-target{ 
      background: #ff0; 
  }
  

  .mPS2id-highlight{ 
      background: #ff0; 
  }
  

In addition, the plugin will add the above highlight classes with the -first and -last suffix (e.g. mPS2id-highlight-first, mPS2id-highlight-last) in order to differentiate multiple highlighted elements. This is useful when you need to style only the first or last of the highlighted links or targets in your CSS.
For example, if multiple links are highlighted at the same time, instead of using .mPS2id-highlight in your stylesheet, you could do:

.mPS2id-highlight-first{ 
    background: #ff0; 
}

An alternative way of restricting highlight to a single link/target and prevent multiple elements from being highlighted at the same time, is to enable Allow only one highlighted element at a time.

There are times when you need to keep at least one element (e.g. a menu link) always highlighted. Enable Keep the current element highlighted until the next one comes into view option if you need such functionality/behavior and your template/page is laid out in a way that at certain scrolling points there are no target sections visible on the screen (no links highlighted).

Enable Highlight by next target option when your target elements have zero height/width to improve highlighting behavior. This option is useful when you add id targets in your content via plugin’s buttons or the [ps2id id='some-id'/] shortcode, as it extends the scrolling range at which an element stays highlighted.

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. If you want to delay page scrolling, use the delay for scrolling to target on page load field and enter how many milliseconds after the page is fully loaded, the scrolling will take place.

Enable different pages scrolling on all links option enables the above functionality on any link pointing to a target id on another page (even if those links are not handled by the plugin). In other words, entering a URL in the browser’s address bar in the form of http://my-site.com/page/#my-id, will always scroll the page smoothly to the #my-id target (without the need for having such link in your page).

If you’ve set link-specific offsets (e.g. via HTML data-ps2id-offset or shortcode’s offset attributes) and want to use this value (instead of the general offset) when scrolling from/to different pages, enable Use element’s custom offset (if it exists) when scrolling from/to different pages option.

When scrolling from/to different pages, the target’s id value is appended on the URL in browser’s address bar. This is the default browser behavior. If you want to remove this value from URL bar, enable Remove URL hash when scrolling from/to different pages.

Leaving the field value empty or 0 (default) disables the option.

Enable insert link/target buttons in post visual editor activates plugin’s buttons in WordPress visual editor toolbar. You can use these buttons to insert links and id targets in your content.

Enable Normalize anchor-point targets to normalize/reset the CSS properties (height, line-height, border etc.) of anchor-point targets.

Enable Encode unicode characters on links URL when having links with encoded unicode characters (e.g. on internationalized domain names) in their href/URL (for proper highlighting of links).