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#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 thebody
tag 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-id
or/page/#my-id
etc. 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
width
orwidth,height
value (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,50
will 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-offset
attribute 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-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.
-
- 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. - 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
ps2id
value in "CSS Classes" field. - Save your menu. Any menu item/link with
ps2id
class 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 thebody
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.
-
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
) withVALUE
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
-
Yes. Add
define('PS2ID_MINIFIED_JS', false);
in yourwp-config.php
file to instruct the plugin to load the non-minified/development version of its scripts. -
Image map links (
area
elements) 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
,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 )
). -
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
Hello,
The plugin looks great and useful.
When I checked with “Prevent other scripts from handling plugin’s links (if possible)” this option, everything works fine with desktop devices. But in mobile view, the nav-toggle is not closing automatically when I click on a section. But when I unchecked the option in mobile devices its working fine. But in desktop by clicking on navigation, its coming from top on each time. not from previous section.
Can you please explain me where is the issue and why it is happening?
Thanks in advance.
Hi,
This happens because a script in your theme handles page smooth scrolling and prevents “Page scroll to id” from doing its thing.
When you enable the “Prevent other scripts from handling plugin’s links” option, it removes the js click events of the theme’s script, in order to enable “Page scroll to id” events to work.
This however, also removes from the links the js click event that close the mobile menu.
The solution is to keep “Prevent other scripts from handling plugin’s links” option enabled (otherwise “Page scroll to id” won’t work with your theme) and add an additional js script in your theme. The script to add is described here:
http://manos.malihu.gr/how-to-close-mobile-menu-with-page-scroll-to-id/
If you can add such script, let me know your site’s URL so I can check it and give you the code to add (the post above describes where to place the code).
Let me know
Hi Malihu
I love your plugin but i have a problem. With the new update from wordpress the anker dont work. sorry i’m not so good in html or css. maybe you can take a look to http://www.greencarrepair.ch who is the problem. thank you
best regard
sascha
it works… in settings I press “reset to default” tadaaa it works
Hai,
This plugin is great. Thank you so much.
Hi,
I have a “УПИС” page that opens a dropdown menu when clicked, with the menu items that are anchor linked. This plugin works perfect when I click from any page but when I click from home page nothing happens.
Also, dropdown menu items that are anchor linked and highlighted all the time. I don’t know how to make anchor links background in dropdown menu grey like they are inactive.
Thank you.
Hi,
Firstly, it seems that you need to remove the trailing slash in your menu links URL (the slash before the hash). For example, change your “Акредитовани програми” link URL from:
https://kizdobranski.com/bk/?page_id=4748/#akreditacija
to:
https://kizdobranski.com/bk/?page_id=4748#akreditacija
Do this for all the links in your dropdown.
Second: The links don’t work from your homepage, because of this script:
...themes/Avada/includes/lib/assets/min/js/general/fusion-scroll-to-anchor.js
Try this:
Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. Save changes, test and let me know (we’ll see the highlight issue when everything works correctly).
Hi Malihu,
Thank you for quick answer.
I tried before with removing slashes, then I can open those links from home page but have to click twice on link and they don’t work when I’m on that page “УПИС”, it works only when clicked from other pages.
I have removed slashes from 3 first anchors in dropdown menu just to show you how it behave.
“Prevent other scripts from handling plugin’s links” is already enabled.
If you have any other idea I ‘ll be grateful…
Tnx
Try deactivating “Page scroll to id” temporarily and see if your links work from the homepage and let me know.
They doesn’t work, they behave just the same.
This means that the problem comes from your Avada theme and it’s not something we can solve. You need to contact the theme developers and ask them for support.
Hi,
Great plugin with a lot of settings, nice work!
I’m working with anchor links, starting from the menu. When you’re scrolling through the page, it works fine by clicking the section you want in the sticky header. But when you start at the top, in the ‘main menu’ the smooth scrolling stops too far to the bottom, so halfway the desired section. The custom offset or putting the #header.sticky there doesn’t seem to work either…
What makes the difference between the perfectly working sticky menu en the main menu who pushes the scrolling the far?
Ben
Hi,
The difference in scrolling happens because your theme changes the page/document length the moment the menu becomes sticky (while scrolling down the page).
When you’re at the top of the page, the menu height is greater than when you’ve scrolled down and the menu becomes sticky (the sticky menu is shorter). This means that every target below your header menu, has its position changed and this happens while the page is scrolling.
Hope this makes sense as it’s a bit technical.
The proper way to develop the menu would be to compensate for the height difference of your non-sticky to sticky menu. Since your theme does not do this, we need to do it ourselves by adding the following to your CSS:
#rs-header .menu-sticky.sticky{ top: 0; } #rs-header .menu-sticky.sticky + *{ margin-top: 149px !important; }
This will also fix the scrolling “glitch” when the menu becomes sticky, i.e. it’ll make the menu transition (from non-sticky to sticky and vice-versa) much smoother.
Let me know
That fixed it right away! 🙂
Thanks a lot, happy to send you a donation.
Ben
Awesome. Thank you 🙂
Hello,
I just started with my website and try to use the page scroll to id to scroll on my homepage. The menu works for most of the links, only the “missie” one stopped working. Can’t figure out why. Besides the page is not really scrolling, but more jumping. It works fine, although scrolling would be nicer. Due to that I am new to building websites, I can’t figure out why it is doing that.
But the main reason I am commenting is due to the offset. It is not doing how I want it. I want the page to stop just before the header on the top and I tried multiple things, but nothing is working. Even when I place a number manually in the offset part of the plugin, it will not stop. Could you please help me out?
Thank you in advance.
Koen
Hello,
The selector you set in plugin is invalid. Go to “Page scroll to id” settings and set the “Selector(s)” option value to the default:
a[href*='#']:not([href='#'])
Save changes and let me know so I can check it again 🙂
Hello Malihu,
I changed the selector to the value you said and saved the changes. Now the menu is referencing to the top of the page, so when you scroll down and click on the menu, it scrolls back up.
Could you maybe have another look?
Thanks in advance.
Hello Malihu,
I changed the sector to the default value suggested. Now the menu is referencing to the top of the page, so when you scroll down and click on the menu, it scrolls back up. Could you maybe have another look at it?
Thanks in advance.
Koen
No problem 🙂
It seems that your HTML document has an error.
There’s invalid HTML code before the doctype. Your HTML document starts with a div element with id “wp-custom-header”. This code is before the
<doctype>
tag and is invalid (this is what causes the scrolling problem).Right now, your HTML is like this:
<div id="wp-custom-header" class="wp-custom-header"> <!-- ...div content... --> </div> <!DOCTYPE html> <!-- ...html, head etc. -->
It should be like this:
<!DOCTYPE html> <!-- ...html, head etc. -->
Nothing should exist before
<!DOCTYPE html>
Your wp-custom-header element should be inside the
<body>
tag.Hope this helps
Thank you so much, I would have never found this error myself. Now the scroll to page plugin is working as it should, really nice! Thanks for the help and the great plugin!
Glad I helped 🙂
Great plugin, but I can’t seem to get the active link to change color. Here’s my situation… I have a home page that has sections that are id with anchors that fall under a main menu called “Produce” and when I hover over the word “Produce” it opens a dropdown menu with the menu items that are anchor linked. What I’m trying to accomplish is to have the “Home” menu item to stay at the default unselected color (#388143) when someone selects one of the “Produce” subcategories. I also want the the selected link to be a slightly lighter color.
What’s happening now is that every time I’m on the home page both the “Home” and “Produce” link colors show being active along with all the submenu items. When I select/click a submenu item nothing changes.
I hope this makes sense! And I am using the Divi theme.
Hello,
I deleted the previous reply you got here as it was just a spam comment that got through.
I just checked your site and it seems that highlight is working as intented(?) Did you fix the issue or?
Hi Malihu! No, I just made the top level menu items all the same color regardless of selection status and on the dropdown I am still unable to get the text font color to change at all so I did the background option you detailed above.
I think the client will be ok with this setup.
Thanks for deleting that spam…. annoying!!!
The font color doesn’t change because the other css rules have the color value as “!important”. So you just need to set it as important too. For example:
.mPS2id-highlight { background-color: rgba(56,129,67,0.5); border: 2px solid #388143; border-radius: 12px; color: red !important; /* change red to the color you want */ }
Hope this helps
I’ll give it a shot! Many thanks and great plugin!
Hi,
Sorry to bother you – I’m trying to save scroll-to-id’s settings for a new WordPress site, after pressing ‘save’ I’m getting a 403 error page with url ending with ‘options.php’. Is there any way to fix this?
Thank you!
Hi,
I haven’t experienced this issue before. Does this happens when you save other settings (like general settings)?
Do you have any security plugin installed? Are you getting any console errors?
Can you make sure sure the file permissions are correct (via FTP client)?
Let me know
Hi, I just install your plugin on my site : <a href="https://rompicoffeetogo.com/" and it is so good.
I have a problem. When I use “#some-id” link format it works. But when I use “https://my-site.com/#some-id” or “/#some-id” link format all of the menu are highlighted. I realized it is because of the theme stylesheet, but I can’t figure out how to solve this.
Could you give me solution about this?
Thank you
Hi,
Did you solve the highlight issue? I checked your page and current menu items do not get highlighted.
Yes, I fixed that issue by adding this, but I don’t know whether this is the right solution or not.
a._mPS2id-h{ color: #fff !important; } a._mPS2id-h:hover { color: #cf9e23 !important; } a.mPS2id-highlight{ color: #cf9e23 !important; }
Now I have another problem. I use Elementor. I added [ps2id id=’some-id’/] on top part of section-5. I want the fourth menu (“PAKET KEMITRAAN”) stay highlighted until section-8.
I enabled “Keep the current element highlighted until….” and “Highlight by next target” on my plugin setting. But the link only highlighted when section-5 appear or when I am scrolling through section-6 to section-8. When I stop scrolling between section-6 and section-8, the menu is not highlighted. It begin highlighted again when I start scrolling.
Could you help me to solve this issue?
Your solution is fine.
I’d suggest to disable the 2 options you enabled and instead of using
[ps2id id='some-id'/]
to create your targets, use Elementor’s CSS ID field as described here:http://manos.malihu.gr/page-scroll-to-id-elementor-guide/
Hope this helps
I did your suggestion and added CSS ID on section-5.
But the menu only highlighted on section-5. I want the menu stay highlighted until section-8
Ok, now enable “Keep the current element highlighted until….” and see if it does what you need.
Otherwise, if you want “Cara Gabung” section to stay highlighted until the end of the page, you need to wrap the “Cara Gabung” section along with the ones below it, with a new section with id
cara-gabung-rompi
I’m sorry, I think I didn’t explain it very well to you.
I want “Paket Kemitraan” menu stay highlighted from “Paket Silver” section to “Paket Entreprise” section.
I added “paket-kemitraan” on “Paket Silver” section CSS ID and enabled “Keep the current element highlighted until…” on the plugin setting and still nothing happened
OK. Now, in plugin settings, set the “Highlight selector(s)” option value to:
#menu-main-menu .menu-item a
Save changes and test.
Sorry for late response. It works. Thank you very much for your help
Greetings, Manolis.
First of all thank you for providing this awesome plugin.
However, I’ve been having a lot of trouble with highlighting just one anchor at a time. I’ve built the anchors applying anchors to each block/section in Gutenberg/Astra Pro and the scrolling is working fine.
The highlight effect though is still applied to multiple menu items. No matter what I do it seems either the theme of the browser defaults are overriding the additional CSS:
.memu-item a.mPS2id-highlight{ color: red; } .memu-item a.mPS2id-clicked{ color: blue; }
Other details: selectors are a[href*=’#’]:not([href=’#’]), “Enable on WordPress Menu links” is checkeck, “Prevent other scripts from handling plugin’s links (if possible)” is checked.
Would you kindly please help me fix it?
I can’t really help unless I see your page. Can you post your site/page url?
OK, I’ve sent it privately.
Hi there,
I have your plugin working perfectly on the website I am building and have used the offset to accommodate a sticky header. However, on one page I have an SVG image with links in it and I cannot get the smooth scroll to work. I am guessing it is to do with the xlink:href attribute. I tried to add this into the selectors but that didn’t work. I also tried the class ps2id but that didn’t work either.
Is there any solution to this?
Kind regards,
Ian
Hello,
The plugin requires an
href
attribute in order to work. This said, you can have anchor (<a />
) elements (i.e. links) withhref
attribute inside SVG elements. For example:<svg width="..." height="..." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a href="#my-section-id"> <rect height="..." width="..." y="..." x="..." rx="..."/> </a> </svg>
Hope this helps
Hello,
I have installed Scroll-to-ID on my website at: https://timbaggaley.com/ and it works great. I like the highlighting in the nav menu as it scrolls through my front page. I want, though, to highlight in the nav menu when on other, static pages, like the contact page, are active. I’d also like the parent page (‘notes’) to be highlighted when viewing single posts.
I need to work within the CSS for S2ID rather than using the usual, global current-menu-item / current-menu-page mark-up to avoid confusion in the front page, yes? I can’t figure out how to highlight my contact and post parent pages. Please advise.
Many thanks
Tim
Hello,
It seems that your menu links on the homepage have slightly different URLs than your menu links on the contact page. For example on the homepage, the “gallery” link has a URL of
#gallery
while on the contact page, it has a URL ofhttps://timbaggaley.com#gallery
.This means that you don’t have to avoid the global current-menu-item class, as it’s not applied in your homepage menu links.
Try changing your highlight CSS to the following:
.mPS2id-highlight, body:not(.home) .current-menu-item a, .single-post .menu-item a[href*='#notes']{ color: #8ba98d !important; opacity: 1; }
The above should highlight the homepage active links, the inner pages links (e.g. contact), as well as your “notes” link when viewing single posts.
Let me know
Hi, please very much help me! I want make one link-menu to go to a desired fragment intro a page.
I have installed Page scroll to id to my wordpress but it’s not working. My link is here:
http://herminasig.md/rca/
could you please help me how to solve this? Thanks!
Your targets do not use the id attribute. They use the name attribute which won’t work with the plugin. You need to create your targets (using the id attribute), following the examples here:
http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#targets-section
Hope this helps
Hey, the newest Version 1.6.9 ist compelty unusable with the Divi Theme (Divi Theme Builder isnt Loading, Images will not be loading…) so I went back to 1.6.8.
Hello,
You probably have an old selector set in plugin settings. Go to plugin settings and set the “Selector(s)” option to:
a[href*='#']:not([href='#'])
Click save changes and update plugin to latest version. Everything should work.
Let me know
Hello,
the selector you gave me was already set in our plugin settings. We have over 20+ sites running divi and your plugin and with the newest 1.6.9 all are completly unusable, so I had to downgrade every site now.
Was the selector exactly as I posted it, with quotes?
a[href*='#']:not([href='#'])
or is it like this:
a[href*=#]:not([href=#])
I have tested 1.6.9 with DIVI and it works for me, so I need to see what’s the culprit. Is there a js console error?
Hey there,
What is the recommended approach to creating an offset using scroll-to-id with Menu links?
I understand how to create an offset on links with HTML, but since Menu links aren’t directly editable with HTML in WordPress, how can I add an offset?
Thanks!
It’s better to use your sticky header selector as the offset value. For example, in plugin settings enter the following in “Offset” option field and click save changes:
#header.sticky
Thanks for your reply!
I tried putting #header.sticky and #navigation-menu in the Offset field and neither of them produced any difference in the offset seen clicking on my scroll-to-id link in the Menu.
My website is http://www.alexvlair.com, and the link is “Projects”. The page scrolls correctly to where I put the scroll-to-id anchor (the text “Projects”) but the offset is wrong and I don’t see a way to modify the offset.
I also tried using the #ps2id-dummy-offset. I put #ps2id-dummy-offset in the Offset field and created a #ps2id-dummy-offset parameter in my CSS as instructed- but still no effect. My menu link consistently scrolls to the same spot on the page no matter what I change. (I tried emptying all caches as well).
Perhaps it isn’t compatible with the theme I’m using? (Vavo)
If there’s another work-around, I’d be happy to know!
Thanks again for your time!
Please set the offset to
#header.sticky
and let me know so I can check it.OK I just set the Offset parameter back to #header.sticky.
Thanks again for your help, it’s greatly appreciated!
Offset is working now, meaning that content is not “hidden” by your sticky header. You also need to try this:
Go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option. Click save changes and let me know so I can test it.
Ok done! The “Prevent other scripts form handling plugin’s links” option is now enabled.
Let me know if you see a difference on your end.
Thanks!
OK. The problem is that your theme (or another plugin) uses its own smooth scrolling function, which prevents “Page scroll to id” from doing its thing (scrolling the page, applying the offset etc.).
I don’t know if this function comes from your theme or another plugin because you’re using cache and your js assets are minified and combined.
Check to see if there’s an option to disable smooth scrolling on your theme or if some other plugin does it. Otherwise it’s impossible for “Page scroll to id” from handling the links and scrolling.
Ah I understand.
Unfortunately there is no option to enable/disable Smooth Scrolling with my theme (Vavo). I’m not using any other plug-ins related to links or scrolling.
The js assets that the theme uses are:
jQuery by John Resig
Isotope by David DeSandro
Images Laoded by David DeSandro
Easing by George Smith
Owlcarousel by Bartosz Wojciechowski
Fit-Vids by Chris Coyier
jQuery vissible by Digital Fusion
Tweenmax by Greensock
Lightcase by Cornel Bopp Art
Revolution Slider by Themepunch
I’m not sure if the problem is coming from one of these? Is there anything I can do to modify them if there is no option given in the theme? (By editing the CSS, perhaps?)
I disabled my cache and minify in case you wanted to look again.
Let me know if you think there might still be something that can be done to solve the issue.
Thanks for your continued support!
OK. I checked your themes js files. Try this:
Give all your menu items (appearance > menus) the css class:
scroll-to
Also, change their URL to include the
www
part. For example, change your “PROJECTS” link from:https://alexvlair.com/#projects
to:
https://www.alexvlair.com/#projects
Let me know so I can re-check
Sorry, don’t add the
scroll-to
class on all menu items. Add it only on the menu items that scroll the page (like the “PROJECTS”).Oh, that seemed to work…! The link now scrolls so that the menu is at the same height as the link ID. I suppose this was the intent?
…So now, how can I add an offset…?
I’d like it to stop about 400 pixels before the ID point (so that the menu is just above the first two images), is there a way to add this?
It’s encouraging to see a change in any case! Thanks!
Actually that created an additional issue; the “Projects” menu link no longer directs to a new page. What this means is that on every other page in the website, the link does nothing.
On top of it, it seems with my theme I cannot create multiple menus, which means I cannot edit the menu link to be different on other pages. Only one menu bar for all the pages…
No problem 🙂
If you want a 400 pixels offset, just set the value:
400
in the “Offset” option field in plugin settings.
For the other issue (the “PROJECTS” link), you’ll need to add some custom javascript to your theme/child-theme. Is this something you can do? I can send you a code to test.
Ah! Yes, sorry it seems obvious but I guess I didn’t try that.
It works! So now the front page is working exactly as hoped, thank you very much!!
For the other issue, I can edit the .php under Theme Options:
“Vavo Child: Theme Functions (functions.php)”
I assume this where I would add the javascript code?
If you do have some code I could test I would love to try!
Thanks again!
(Just for clarity, the functionality that I would like from this menu link on every other page is to load the home page and follow the id target, which is what it was doing before (https://www.alexvlair.com/#projects)
Thanks!!!)
Add the following PHP code to your theme/child-theme functions.php:
//malihu //fix for projects and all similar links that scroll the page function malihu_ps2id_custom_script(){ wp_register_script( 'malihu-ps2id-custom-script', '', array( 'jquery' ), '', true ); wp_enqueue_script( 'malihu-ps2id-custom-script' ); wp_add_inline_script( 'malihu-ps2id-custom-script', '(function($){ $(window).on("load",function(){ var elem=$(".menu-item.scroll-to a:not(._mPS2id-h)"); if(elem.length){ elem.each(function(){ $(this).parent(".menu-item").removeClass("scroll-to"); }); } }); })(jQuery);' ); } add_action( 'wp_enqueue_scripts', 'malihu_ps2id_custom_script'); //-----
Let me know 😉
Amazing. It’s working perfectly now.
Can’t thank you enough! It’s amazing that you make yourself so available to help people struggling with the plug-in like myself.
I’m not sure how you make ends meet with this kind of business model but I’ll make sure to click the donate link at the bottom of the page, I really appreciate your time here!
Thanks again!!
It wont let me scroll to page ID from another page.
What do I do to fix this problem?
Please see related FAQ:
http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-5
If you need more help, I need to see your site/page.
Page scroll to id works perfectly on my homepage but if i go to another page lets say portfolio, it won’t let me go to the homepage because it is a custom link where the page scroll is.
I’m not sure how to add the full address for the ABOUT and SERVICES because it is all on the homepage..
Thank you for quick response and hope to hear from you v soon,
Amanda
Hello Amanda,
Since the links are in your homepage, you can simply use the root-relative URL, by adding a slash in the beginning of the URL. For example, change your “SERVICES” URL to:
/#services
and your “ABOUT” to:
/#about
That’s easier than using the full URL, like
https://aegraphix.com.au/#services
.You can find more info about URLs here:
https://yodaconditions.net/blog/html-url-types.html
Thank you so much! it works now!
Hello, I love this Plugin and I guess it safes my project :-).
I have the problem that more than one item is highlighted after scrolling. But only ONE should be highlighted, see this video please:
https://www.loom.com/share/6918af3251ba466d985e051c519ad689
Activated is “Allow only one highlighted element at a time” and “Highlight by next target” but still have multiple active.
Any idea how to avoid to have more then one section active?
Thank you!
Florian
Hi,
I think there’s a conflict between the plugin and the sticky menu. Try this:
1. Go to plugin settings and disable “Allow only one highlighted element at a time” option.
2. Add the following in “Highlight selector(s)” option field:
.iksm-term__link
Click save changes.
3. Change your existing CSS rule to:
.mPS2id-highlight-first{ border: 5px solid blue !important; }
i.e. change .mPS2id-highlight to .mPS2id-highlight-first.
Let me know if it worked
Hello malihu, THANK YOU very much! This helps me big time! Will play around and if it is ready I will reply again. THANKS, really cool!