Page scroll to id for WordPress

• Plugin homepage & documentation

Knowledge Base – FAQ

• Can I use the plugin to scroll inner elements (e.g. an overflowed div) instead of the whole page?

  No, the plugin works strictly on document's root element (html/body) in order to function properly with element highlighting, deep-linking etc.

• How do I make my links stay highlighted for longer distance while scrolling?

  A quick way is to enable Keep the current element highlighted until the next one comes into view option

  Alternatively, you could use the wrapper target shortcode to create your id targets and have full control over the scrolling distance your link(s) stay highlighted.

• The page doesn't scroll to the very top

  Make sure your target element is at the top by checking its position via browser's developer tools (in most browser's, you can right-click the element and select "Inspect" to view it within the HTML code).
  If your link's URL is #top and no such target id exist in your page, the plugin will scroll the page automatically to the very top (determined by the position of the body tag in the HTML).

• The page doesn't scroll exactly where I want

  The page should scroll to the top (i.e. starting) position of the target, so firstly make sure that your target(s) position is indeed correct (or what you want it to be). Note that the top position of elements does not include CSS margins, so check if you need to adjust any of your target's CSS properties.

  In general, you can adjust/tweak the scroll-to position by changing your target(s) position or by using plugin's "Offset" option.
  For example, if your page has a top sticky/fixed-positioned menu, you should set an offset value in order to avoid the menu covering your content when the page is scrolled.

• How do I make my links work from any page in my site?

  Add the full address as your links URL/href value instead of just the hash with the id. For example, instead of #my-id, use http://my-site.com/page/#my-id or /page/#my-id etc. in the link's URL.

• How do I make my links scroll the page smoothly when their target is on a different page?

  The plugin has the options to scroll from/to different pages enabled by default (if not, enable it), so you only need create links with the full address in their URL (e.g. http://my-site.com/page/#my-id).

• How to deal with sticky menus overlapping or covering content?

  You should use plugin's "Offset" option and set how much you want to offset page scroll (see option for more info).

• Is it possible to disable "Page scroll to id" functionality on mobile or smaller screens?

  Yes, via Disable plugin below option. You can set a width or width,height value (indicating pixels) below which the plugin will be disabled (see option for more info).

• Does the plugin offer user-defined callbacks, js scroll events/methods or some other advanced feature?

  It does. You can take a look at the jQuery/non-wordpress version of the plugin for available options, methods etc. The plugin script offers things like changing options on-the-fly, triggering scroll events programmatically, running callback functions at the beginning and end of each scroll etc., so contact me if you need help 🙂

• Can I set different vertical and horizontal offsets

  Yes, set different vertical and horizontal offsets by adding comma separated values in plugin's "Offset" option field.
  For instance, inserting 100,50 will offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels).

• Can I have links with different offsets?

  Yes. If you're using plugin's "Insert/edit Page scroll to id link" button in WordPress visual editor, you can set a link-specific offset value in the "Offset" field of the "Page scroll to id" modal.

  If you're using plugin's shortcode, you can use the offset attribute like so: [ps2id url='#some-id' offset='100']link text[/ps2id]

  If you create your links manually in HTML, you can use the data-ps2id-offset attribute like so: <a href="#some-id" rel="m_PageScroll2id" data-ps2id-offset="100">link text</a>

• Multiple links get highlighted! How to highlight only one?

  Firstly, you need to determine if highlighting comes from "Page scroll to id" or by your WordPress theme. If you didn't use any of the plugin's highlight classes in your CSS, then the highlighting you see comes from your theme's stylesheet. It's common for themes to style current page menu items differently. If that's the case, you should edit (or overwrite) your theme's CSS.

  If you did use plugin's mPS2id-highlight class in your CSS, then you can try any of the following:

  • Enable Allow only one highlighted element at a time option in plugin settings.
  • Instead of .mPS2id-highlight, use .mPS2id-highlight-first or .mPS2id-highlight-last selectors in your CSS to style the first or last highlighted link accordingly.

• How does link highlighting work? What should I do?

  See Classes & highlight options description and plugin's basic tutorial

• How to make the plugin work with WordPress Menu links?

  1. Create your menu items/links on your menu (Appearance → Menus). You should create/add "Custom links" as these type of links allow us to enter a custom URL with the id we want. Your links URL could be in the form of #my-id, http://my-site.com/page/#my-id, /page/#my-id etc.
  2. Create the id targets that your links will scroll to, using plugin's "Insert Page scroll to id target" button in WordPress visual editor or plugin's shortcodes.
     Another option is to use id values that already exist in your theme.
  3. The plugin is enabled by default on WordPress Menu links so normally everything should work.
     Some themes have their own custom function for generating menus which might prevent the "Enable on WordPress Menu links" option from working. In such case or if for any reason you need to enable the plugin on your links manually, do the following:
     • Go to Appearance → Menus to edit your links.
     • Click "Screen Options" at the very top and make sure "CSS Classes" is checked.
     • Click to edit each one of the links you've created and insert the ps2id value in "CSS Classes" field.
     • Save your menu. Any menu item/link with ps2id class will be handled by the plugin.
     If for any reason your theme does not allow adding custom classes to menu items, add the menu item selector in "Selector(s)" field in plugin settings. A common WordPress menu item/link selector is .menu-item a[href*='#'], so try adding this value in "Selector(s)".

• How do I find existing id attributes in my site/theme in order to use them as targets for my links?

  You basically need to see the generated HTML code of your page(s) and search for id="some-id" patterns, e.g. <div id="some-id">...</div>
  The best way to do this is to use browser's developer tools (Chrome and Firefox are browsers with great developer tools), so the steps are as follows:

  1. Open your page in say Google Chrome.
  2. Hit the F12 key or right-click any element a click "Inspect" to open the developer tools window.
  3. Switch to "Elements" panel (if necessary) where you can see the page's HTML code (in real-time).
     In this panel you can toggle each HTML tag and hovering over each one, highlights it in browser's main window (where you can conveniently see its actual position within the page/document). The tags/elements you should look for are within the body tag.
     You can also right-click any element in the main window (e.g. a title, paragraph, section, image etc.) and click "Inspect" to highlight it in the "Elements" panel. There you can see if the inspected element has an id attribute value and use it as your link(s) target.

• Is it possible to use the plugin to scroll the page with mouse-wheel or arrow keys?

  It is possible only if you can add custom javascript in your template/theme. See "Page scroll to id with mousewheel and keyboard" guide.

• Can I have links with different scroll duration/speed?

  You can change the scroll duration/speed of a link by giving it a special class in the form of ps2id-speed-VALUE (i.e. ps2id-speed-600) with VALUE indicating the scroll duration in milliseconds (lower duration equals faster scrolling).

  If you're using plugin's "Insert/edit Page scroll to id link" button in WordPress visual editor, you can add the special class in the "Custom class(es)" field of the "Page scroll to id" modal.

  If you're using plugin's shortcode, you can use the class attribute

• Is it possible to use uncompressed/non-minified plugin scripts?

  Yes. Add define('PS2ID_MINIFIED_JS', false); in your wp-config.php file to instruct the plugin to load the non-minified/development version of its scripts.

• How to use with image maps?

  Image map links (area elements) work the same as normal links (anchors). See this comment and this thread.

• How to use the plugin with Divi Builder?

  See Using Page scroll to id with the Divi Builder plugin.

• Scrolling is correct only after I click a link twice!

  Some themes and plugins change document's length while the page is scrolling. A common example would be when a menu becomes sticky (i.e. fixed) only when the user has scrolled down the page. There are cases where when this happens, the menu's previous state (when it was not sticky) space becomes zero, thus changing the document/page length. This means that targets position is different according to the state of the menu, that's why when clicking the link a second time, scrolling seem to become "correct".

  You can deal with this either by adjusting your menu CSS (not always possible) or by enabling Verify target position and readjust scrolling (if necessary), after scrolling animation is complete option in plugin's settings.

• How to use the plugin with WPBakery Page Builder?

  See Using Page scroll to id with WPBakery Page Builder.

• How to use the plugin with SiteOrigin Page Builder?

  See Using Page scroll to id with SiteOrigin Page Builder.

• How to overwrite plugin options with code?

  You can overwrite some of plugin's option via javascript. For example, you could add the following script in your theme's header.php inside the head tag:
  window.ps2id_special_params={ highlightSelector: "a.some-class" };

  You can use the following option parameters: highlightSelector, scrollEasing, scrollSpeed, keepHighlightUntilNext, forceSingleHighlight, appendHash, layout, offset

  You can also do the same by adding the following in your theme/child-theme functions.php:

  add_action( 'wp_enqueue_scripts', 'ps2id_special_params_0', 1 );
  
  function ps2id_special_params_0(){
  	if(class_exists('malihuPageScroll2id')){
  		$pages_arr = ps2id_mw_get_pages();
  		if(is_single( 23 )) : 
  			wp_register_script( 'page-scroll-to-id-special-js-params', '', array(), '0.0.1', false );
  			wp_enqueue_script( 'page-scroll-to-id-special-js-params' );
  			wp_add_inline_script( 'page-scroll-to-id-special-js-params', 'window.ps2id_special_params={
  				highlightSelector: "", 
  				scrollEasing: "easeOutCirc", 
  				scrollSpeed: 700, 
  				keepHighlightUntilNext: false, 
  				forceSingleHighlight: false, 
  				appendHash: false,
  				layout: "auto",
  				offset: 100
  			};');
  		endif;
  	}
  }

  The function above will add the script on the post with id 23 (see: is_single( 23 )).

• I have issues with WordPress 5.5 and Visual Composer/WPBakery page builder

  In plugin settings change the "Selecotr(s)" option value from a[href*=#]:not([href=#]):not([data-vc-tabs]):not([data-vc-accordion]) to the default a[href*='#']:not([href='#'])
  The issue is related to this topic.