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> -
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.
Pages: 1 2
Hi I have a problem with my website and was wondering if I can resolve it with your plugin.
When I click on the browser back button I can get my page to scroll back on the anchor link I was on.
Any pointer on how I can fix this?
I’m sorry, but I’m moderately skilled with CSS and code – but cannot understand why on the linked page below, the Scroll2 link works as it should when placed as a shortcode from the text editor, but the same class does not function when the class is assigned to an image.
I’ve all of the many class references in the plugins settings documentation, or I believe I have.
Did you solve the issue? I just checked your page and the image link seems to work fine.
Hey!
Love this plug-in – thanks for developing it!
I have one slight issue with link highlighting … It seems like the navigation links are not getting the mPS2id-highlight class set after I’ve clicked on them.
I do have “Enable on WordPress Menu links” ticked in the settings, and have tried de-selecting “Allow only one highlighted element at a time”, but no joy. I can confirm that the anchor tags in my nav menu have data-ps2id-api=”true” set.
Can you tell me what I am missing please?
Thanks,
Steve
I can’t really say without seeing the page. Do the links have the
_mPS2id-hclass?Hi there! I love the plugin and have used it on many sites. Thank you!
I’m trying to link to the ‘Photos’ section on my Gallery page. When I click the ‘Photos’ link from the Gallery sub-menu, the Instagram feed is still loading, the page blinks a few times, and doesn’t scroll to the target row. I tried delaying the scroll in the settings, but that didn’t work. Wondering if there’s a way to call the scroll after the Instagram feed loads to avoid any issues?
Best,
Blake
You would need to develop a custom js script that will wait till all the (dynamic) feed images have loaded before initializing a “Page scroll to id” scroll event (you need a web developer for this).
Another way would be to give the wrapper element of the gallery feed a fixed height value according to viewport in CSS. This can be tricky because the width of each image item is fluid (25%) and the height is set on-the-fly by some other script (probably the gallery script).
Maybe you could do something like this:
@media only screen and (min-width: 480px) { #sb_instagram { height: 0; overflow: hidden; padding-bottom: calc(75% + 50px); } }The above might work as long as you always load 12 Instagram images.
Thank you very much! Great plugin!
Hi Malihu,
Sorry if this is a totally basic and naive question, but how do you get the pages to scroll horizontally? I’ve checked the ‘horizontal’ box in the settings and for test purposes set up a couple of links and targets on a page but nothing happens – no right and left arrows, no horizontal scrolling, nothing.
As I say, sorry if this is a bit basic.
Hello,
In order to use horizontal scrolling, you need a horizontal layout theme.
The plugin does not modify your theme template, i.e. it does not change your theme design from vertical to horizontal (it’s not really possible anyway).
When you set the layout option to horizontal (in plugin settings), you simply tell the plugin that your page/theme’s layout is horizontal and it should scroll the x axis.
You can see how a horizontal layout design looks (and works) in this demo.
You’ll either need to find a horizontally laid-out theme or develop/design one yourself (if you’re a web developer).
Hope this helps
Hi,
first of all: Thanks for this awesome plugin!
But I’m struggeling a bit, because I don’t know if this is even possible with your plugin.
I know how to use shortcode to create clickable links with specific scroll durations in the editor, but I’m wondering whether I’m able to do adapt the duration, when I’m using #-links on buttons or images.
Can I somehow use the ‘ps2id-speed-100’ in those situations?
Regards and thanks in advance,
Konrad
Hello Konrad,
If you cannot add the class “ps2id-speed-100” to your standard/plain links in your editor (some page builder plugins may allow this), you’ll probably need to do it (manually) via javascript.
If you can, add the following js code in your footer.php or wherever your theme allows you to add custom javascript:
<script> (function($){ $(window).on("load",function(){ $("a[href='#section-3'],a[href='#section-5']").addClass("ps2id-speed-100"); }); })(jQuery); </script>We could change the above code to apply the speed on links that include a button and/or image element. Would this be what you need?
I should also mention that you could simply change the scroll duration in plugin settings to
100and just add a class likeps2id-speed-900to your menu items (you can add custom classes in wp menu items).This will make the default scroll duration/speed 100ms while your menu links will have a custom one set by the class name (e.g. 900ms).
Hey,
thanks for your response.
Sadly, I couldn‘t really figure out how to use the javascript to get it like i want.
(Not the most experienced guy here)
Just for understandig… Would this script make it possible to have standard url links (on icons, buttons, etc.) while every single one of those has a different duration speed?
BUT the hint with classes in my menu items was a good one. I think I can work with that.
The good thing is that for example my Slider Revolution Plugin is able to add classes to buttons, so that works great.
Greetings,
Konrad
Yes, you could do it via javascript but if you can do it via the menu classes go with that. It’s (almost) always better to avoid extra javascript code if you can.
For javascript, you’d also need a bit of experience to know what selectors to use. If you find that you cannot avoid adding the extra script, let me know 😉
Hi Malihu,
Thanks for the great plugin… I’ve explored and combined it with a sticky module plugin, the whole used through the Divi builder.
icet.fr/presentation/
It looks fine and all – but if you check the link above on a computer screen (it’s deactivated on smaller screens), the active anchor-link item in the sticky menu switches some half a screen before the next anchor is actually crossed… I would like the active menu item to change when the module having the anchor is actually “crossed” but that sticky menu bar.
I tried working on the off-set parameter – but whether I put -500, 0 or 1000 there I don’t see any change… I must be getting something wrong ?
Thanks for your help ! Best,
Samuel
Hello Samuel,
This happens because a)you’ve enabled both “Allow only one highlighted element at a time” and “Keep the current element highlighted until the next one comes into view” options and b)you’ve set the target ids on the section title.
For better/correct link highlighting I’d suggest the following:
1)First, disable both options in plugin’s settings.
2)In your page builder (I think you use Divi?) wrap each section in a row and move the id to the row.
To make it more clear:
Right now you have:
– a widget with the section 1 title/image (that has the 1st target id)
– a widget with the section 1 content
– a widget with the section 2 title/image (that has the 2nd target id)
– a widget with the section 2 content
– a widget with the section 3 title/image (that has the 3rd target id)
– a widget with the section 3 content
Try to do it like this:
– a row that has the 1st target id
— a widget with the section 1 title/image (remove the id from here)
— a widget with the section 1 content
–
– a row that has the 2nd target id
— a widget with the section 2 title/image (remove the id from here)
— a widget with the section 2 content
–
– a row that has the 3rd target id
— a widget with the section 3 title/image (remove the id from here)
— a widget with the section 3 content
–
In short, place your widgets inside a row that will have the section id (and act as the target).
This way, you don’t need to mess with any extra options and highlighting will work correctly.
Let me know
It worked, Malihu, thanks a lot 🙂
All the best,
Samuel
i am using the mesmerize theme which has a built in page builder. after installing the target link on the page and creating the custom link in the menu it works great……
when i publish it again the target link disappears and then it doesnt work any more.
Don’t know if you already fixed this but the targets and links work for me when I visit your page.
Hi Malihu, I have 2 ongoing pages and the “custom link” using URL/href works fine for 1 of the pages, but not so good for the other one.
The issue is that the Top Menu button perfectly scrolls to the section/div of the homepage but if you are on another page and click any of the top menu buttons, it errors…
I have used as recommended the following:
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.
this is how it looks the item for the “Motos” on the Menu structure in the dashboard…
Motos Custom Link Edit
UR
http://www.motorcrazygarage.es/#pg-45-1
Navigation Label
Motos
MoveUp one Down one Under Inicio To the top Remove | Cancel
url:
http//www.motorcrazygarage.es (not working)
http://www.ladiavla.es/ (works OK)
Much appreciated any help u can offer with this issue… thanks
Hello,
Some of your links (like “Historias de éxito” and “Contacto”) URL are not correct. For example, “Contacto” URL is:
http://http://www.motorcrazygarage.es/#pg-45-6but it should be:
http://www.motorcrazygarage.es/#pg-45-6Hello Malihu,
I´m so sorry, but CSS is not my profession.
Made another test and now are running all menu point to the section, but not axactly. In the following video you will see it:
https://www.dropbox.com/s/fxo0rzpoxuw38fn/Springform%20Section%20scroll.wmv?dl=0
<div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="eins" class="_mPS2id-t"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 1</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="zwei" class="_mPS2id-t mPS2id-target mPS2id-target-first"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 2</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="drei" class="_mPS2id-t mPS2id-target"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 3</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="vier" class="_mPS2id-t mPS2id-target mPS2id-target-last"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 4</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper tve_wp_shortcode"><div class="tve_shortcode_raw" style="display: none">___TVE_SHORTCODE_RAW__[ps2id id='help' target=''/] __TVE_SHORTCODE_RAW___</div></div>What can I do?
Best regards Ludolf
Hi,
I’m not sure if this is what you need but you can tweak page scrolling position using the “Offset” option in plugin settings. For example:
Go to “Page scroll to id” settings and change the “Offset” option value to:
40Save changes and test your page.
The value
40will offset page scrolling by 40 pixels, so if you need more/less you simply increase/decrease the number.Hello Malihu,
made a second test with 4 Sections. The result is it runs only to the first Section under the Menu, but not to the other three sections.
The Menu: eins – zwei – drei – vier
Here the CCS:
<div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="eins" class="_mPS2id-t mPS2id-target mPS2id-target-first"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 1</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="eins" class="_mPS2id-t mPS2id-target"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 2</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 3</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;"> h1 Section 4</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper tve_wp_shortcode"><div class="tve_shortcode_raw" style="display: none">___TVE_SHORTCODE_RAW__[ps2id id='help' target=''/] __TVE_SHORTCODE_RAW___</div></div>What can I do or have to do?
Best regards Ludolf