Page scroll to id for WordPress
Knowledge Base – FAQ
-
No, the plugin works strictly on document's root element (html/body) in order to function properly with element highlighting, deep-linking etc.
-
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.
-
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#topand no such target id exist in your page, the plugin will scroll the page automatically to the very top (determined by the position of thebodytag in the HTML). -
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. -
Add the full address as your links URL/href value instead of just the hash with the id. For example, instead of
#my-id, usehttp://my-site.com/page/#my-idor/page/#my-idetc. in the link's URL. -
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). -
You should use plugin's "Offset" option and set how much you want to offset page scroll (see option for more info).
-
Yes, via Disable plugin below option. You can set a
widthorwidth,heightvalue (indicating pixels) below which the plugin will be disabled (see option for more info). -
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 🙂
-
Yes, set different vertical and horizontal offsets by adding comma separated values in plugin's "Offset" option field.
For instance, inserting100,50will offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels). -
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-offsetattribute like so:<a href="#some-id" rel="m_PageScroll2id" data-ps2id-offset="100">link text</a>For WordPress menu items, you can use the class
ps2id-offset-NUMBERin the menu item Classes field, replacingNUMBERwith the offset you want for that specific menu link. For example, for 80px offset, add the classps2id-offset-80(feature added in plugin's version 1.7.4). -
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-highlightclass 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-firstor.mPS2id-highlight-lastselectors in your CSS to style the first or last highlighted link accordingly.
-
- 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-idetc. - 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. - 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
ps2idvalue in "CSS Classes" field. - Save your menu. Any menu item/link with
ps2idclass will be handled by the plugin.
.menu-item a[href*='#'], so try adding this value in "Selector(s)".
- 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
-
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:- Open your page in say Google Chrome.
- Hit the F12 key or right-click any element a click "Inspect" to open the developer tools window.
- 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 thebodytag.
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.
-
It is possible only if you can add custom javascript in your template/theme. See "Page scroll to id with mousewheel and keyboard" guide.
-
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) withVALUEindicating 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
-
Yes. Add
define('PS2ID_MINIFIED_JS', false);in yourwp-config.phpfile to instruct the plugin to load the non-minified/development version of its scripts. -
Image map links (
areaelements) work the same as normal links (anchors). See this comment and this thread. -
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.
-
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,offsetYou 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 )). -
In plugin settings change the "Selecotr(s)" option value from
a[href*=#]:not([href=#]):not([data-vc-tabs]):not([data-vc-accordion])to the defaulta[href*='#']:not([href='#'])
The issue is related to this topic.
Pages: 1 2
Hi,
I cannot understand why, but everytime I click on one of the two link in the menu that are supposed to scroll (the first two), it re-loads the page before scrolling.
Also I cannot find a way to have only one highlighted only when on the section.
The page I’m talking about is here: casalovett.com/home
Let me know if you need more info.
And, by the way, thank you so much for all the work you’ve done and you’re doing in helping people with the plugin!
Hello,
Your site uses
httpsand redirects all non-SSL requests (http) tohttps.Your links URL are all
http, that’s why the page “reloads”.You simply need to change your links to use
https. For example, change your “Chi Siamo” link URL from:http://casalovett.com/home/#chisiamoto:
https://casalovett.com/home/#chisiamoor:
/home/#chisiamoand it’ll work.
Also, the highlight you see comes from your theme (WordPress themes usually highlight same-page links). You can reset/change this by adding the following to your custom/additional CSS:
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .current-menu-item > .menu-link._mPS2id-h:not(:hover):not(.mPS2id-highlight){ color: inherit; }These should do the trick 😉
Let me know
Thank you so so much, it’s all solved!
Damn, I was going crazy with the page-reloading issue and it was very simple in the end.
Awesome! Glad I helped 🙂
hi with the latest version of divi scroll to id stopped working in horizontal but still work in vertical scroll.
Can you help please
Hi,
I just checked your page and both vertical and horizontal work. Did you fix the issue or?
Hi, I am using DIVI builder and it doesn’t seem to want to play nice with offset. I have tried using the shortcodes and some of the other solutions you have supplied in the past but it’s still not working and scrolling past the element.
Any assistance would be much appreciated.
Hello,
There’s another script in DIVI theme preventing “Page scroll to id” from doing its thing.
Try this:
Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. You can also add the following value to “Prevent other scripts from handling plugin’s links selector(s)” option field:
a[href*='#']:not([href='#'])Save changes, test and let me know 🙂
Hello,
Can somebody tell me how can I disable the table of contents on the top of the page I used Cool Timeline plugin please?
thank you in advance
Hi,
I’m not sure what you’re asking is within plugin’s scope(?)
This said, if you can post your page/site URL I might be able to check what happens and help.
Im am trying to make a delayed auto scroll on page load. U have provided the code before:
(function($){
$(window).on(“load”,function(){
$.mPageScroll2id(“scrollTo”,”#id”);
});
})(jQuery);
What I am trying to do is set the autoscroll to only 3 different pages. Could you provide simple steps to follow to achieve this goal and basically disable the plugin everywhere else? Also time delay code for this would be much appreciated also, since I do not have any knowledge you can say in this.
If my goal is simple, maybe its achievable without the plugin, and you can guide me that way also 🙂
Hello,
You can effectively disable the plugin just by using a value like
.nothingin “Selector(s)” option in plugin settings.You can then add the auto-scroll script only in the templates you want using PHP WordPress conditions or by using a javascript condition that checks for specific class(es). If I could see your page I’d be able to provide some code.
To delay auto-scroll on page load, you can use a simple timeout like this:
(function($){ $(window).on("load",function(){ var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#id"); },$delay); }); })(jQuery);Thank you for the delayed code!
Absolutely! Here’s one page, which is supposed to be done like another two, which have the same layout (the first 100% screen height slide with picture and Title and after it the respective page content which I want the page to auto scroll after a short time delay)
https://www.temporary-url.com/12E0E
I shortened the link so it would not stay in this conversation if you don’t mind.
Also, if it’s not too hard for you, could you give me short instructions, on where to inject the code that you will provide me, so that I would not break anything.
P.S. at the moment the plugin is deactivated, if that changes anything.
No problem 🙂
If your theme provides a field to add javascript code in your theme, you can place the code there. Otherwise, you can simply add the script in your theme/child-theme
footer.phptemplate, right before the closing body tag (</body>).If you don’t want to deal with PHP code and search for the page id value etc., you can add a javascript condition on the script:
<script> (function($){ $(window).on("load",function(){ //assuming your target id you want to scroll to is: my-id if(!$("#my-id").length) return; var $delay=1000; //set the delay in milliseconds setTimeout(function(){ $.mPageScroll2id("scrollTo","#my-id"); },$delay); }); })(jQuery); </script>This is awesome, everything works!!!
Thank you very much, I wish you nothing but the best!!!
You’re welcome 🙂
Hello! First: thank you for this lovely plugin!
Secondly: I want to use two anchors in a text section, which don’t have anything to do with my ps2id-links in my menu. However, they interfer with these menu-links and mess up their styling. Is there a way to “exclude” anchor-links from the ps2id-link-behaviour?
I hope this was understandable …
Thanks and regards,
Jen
You can use the selectors are excluded field to add your links selector in the list.
This said, the styling can usually be fixed with a few CSS lines. If I could see your site/page I’d be able to help with a pure CSS solution.
Thank you so much for your super quick reply! Now that you have explained, I am a littel ashamed to have overlooked the exclude-option …
Don’t be 🙂 Glad I helped.
Is it possible to scroll a page down without user interaction, to activate a scroll on page load or shortly after?
Sure but you’ll need to add an extra js script in your page/theme template.
For example, you can add the following script in your theme/child-theme footer.php right before the closing body tag (
</body>):<script> (function($){ $(window).on("load",function(){ $.mPageScroll2id("scrollTo","#id"); }); })(jQuery); </script>and change the
#idto the id you want to scroll to on page load.The code above is the basis and you can expand it with a delay, run on specific page(s) etc.
I found your plugin to do just what I need—highlight menu items as I scroll through a long, one-page website. So thank you! I have a question about styling, though.
My website is http://www.midtowncaboose.com/staging (Please disregard all content and colors. They are just placeholders as I figure out this styling issue.)
I am able to change the text and/or background color of the links when I scroll by targeting .mPS2id-highlight.
My nav is a ul, with each link as a li, which I think is pretty common. I would like to be able to style the li that contains each link when I scroll, rather than just the link itself.
I have figured that if I give the li no padding and hidden overflow, and I display the a as block, the a fills the li container. That works great for changing the background color of that menu section.
Is there a way to give that section a box shadow? I would love any insight you can offer. Thanks!
Hi,
You don’t really need the li element to be
overflow: hidden. You can remove it and give the link the box-shadow you want and it’ll work. Is there a reason for having the hidden overflow on the list item?Nope! I was experimenting and came across the advice to do that. I’ll take it off and see if I can make it do what I want. Thanks so much for your reply!
No problem 🙂
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".mega-menu-link .mega-menu-item .mega-menu-item-type-custom #.mega-menu-item-1501 .mega-menu-item-object-custom ._mPS2id-h",function(){ $(".mega-menu-toggle.mega-menu-active").trigger("click"); }); }); })(jQuery); </script>I cannot get the mobile menu to hide when I click on contact.
Kind regards,
Gavin
Hi, Malihu. I’m using your wonderful PS2ID plugin on an Elementor site but I’m having the issue that others have mentioned: the mobile menu won’t close on click. I’ve tried some of the scripts you’ve posted and they don’t seem to work. Can you help me with this? The link above is a prototype page for my one-page site, and I’ll be using the same mobile menu on additional portfolio pages.
I appreciate any help you can offer. Let me know if you need more info.
Yes, of course I can help 🙂
Try the following script and let me know if it works:
<script> (function($){ $(window).on("load",function(){ $(document).on("click",".elementor-nav-menu .menu-item ._mPS2id-h",function(){ $(".elementor-menu-toggle.elementor-active").trigger("click"); }); }); })(jQuery); </script>The script worked great. Thank you, Malihu!
You’re welcome 🙂