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. -
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.
Pages: 1 2
Hi,
am thankful for this plugin which i have applied on m landing page here is link https://dandbdubai.com/the-valley-by-emaar/
On that page its working fine.
I found one issue in other pages, am assuming a conflict of theme js and this plugin js.
if you can explore https://dandbdubai.com/buying/ then on top right section there is link ‘Reques A Callback’, when user click on that button, js will open dive having form to submit information. Now this button with ‘on click’ js not opening form.
<div class="textwidget custom-html-widget"><a href="#" class="contact-box ">Request A Callback</a></div>and in js file
$('.contact-box ').on( 'click', function(event) { event.preventDefault(); $('.contactformwrapper').toggleClass('hidden'); contact_footer_starter(); });Can you please help me in this task.
Hi,
The “Request A Callback” link and the javascript code you posted do not have any functionality related to “Page scroll to id”. Not sure if you wanted to post this on other support forum?
Hi there,
thank you for that powerful and versatile plugin! I got my anchor navigation and highlighting according to my wishes within minutes.
But there is one problem about highlighting the links that I wasn’t able to solve:
I am using the Lay-Theme for a wordpress site.
I wrapped some content groups into divs (like , ,, a.s.o.),
built a menu with according links (#2019, #2018, a.s.o.), and setup the css with styles for highlighting the currently active links/content div.
Navigating/scrolling works like a charm, but always the last link stops being highlighted as soon as the opening div tag scrolls out of viewport. It does not stay highlighted till the end of the div like the upper divs do.
The site is: https://dev.flimmern-dc.com/JMU/works
Maybe you know, or can see what I’m missing here…
I’d totally appreciate if you had an idea!
Best
M
Hello,
May I ask what page builder you’re using?
I’m asking because there might be a better way to add the targets in your sections (e.g. by adding an id to the whole row instead of adding simple targets).
Let me know 🙂
Hey,
thanks for your reply!
I dont use a page builder, i just use the “lay theme” (http://laytheme.com/) which basically works with a grid of colums and rows to layout your content.
I tried to wrap several rows with content into divs with the according id. (i.e. four rows with one image each wrapped into , four rows for 2018, four rows for 2017, a.s.o.
As I said – navigating/scrolling works perfect and also the highlighting works as estimated with exception for the last link/wrap.
I also tried giving the ids to every single row (which means there are four rows with the id=”2019″, four rows with the id=”2018″, a.s.o.)
So when I scrolled tha page all the way down there are definitely rows with the id=”2015″ inside the viewport, but still the last link stops being highlighted as soon as the opening div for the last wrap scolls out of viewport…
When I check the source code, I see that only the first row of the last group of rows gets the “mPS2id-target-* classes”…
OK. Is it perhaps possible to add each of your images in one row? i.e. not having one row for each image?
For example:
row id 2019 image/caption image/caption row id 2018 image/caption image/caption image/caption row id 2017 image/caption etc...I see. The issue is that the target ids are set on each each sibling section while the option “Highlight by next target” is enabled. The last section(s) do not have a “next target” as they are last.
Can you wrap your rows with another row and give the wrapper row the id?
What I mean is this:
Right now, your sections are like this:
row id 2019 row id 2019 row id 2018 row id 2018 row id 2018 row id 2017 etc...It’s better to make them like this:
row id 2019 row row row id 2018 row row row row id 2017 row etc...i.e. can you add rows within another row/section with your theme editor?
Hi there,
thank you so much for trying to help here!
Unfortunately there seems to be no way to wrap rows into other rows or rows into sections.
Custom html is theoretically possible, but when I try wrapping rows like this
row
row
row
…
then I see the div closed in the source code before the first row opens up.
By the way same thing when I try using the wrapping shortcodes.
Hi there,
thank you so much for trying to help here!
I’m sorry, I was too stuid to display code here properly.
Unfortunately there seems to be no way to wrap rows into other rows or rows into sections.
Custom html is theoretically possible, but when I try wrapping rows like this
div id="some-id" row row row … /divthen I see the div closed in the source code before the first row opens up.
By the way same thing when I try using the wrapping shortcodes.
Hello, I’m having a problem on my french version of the site, for the english one which is test.maisonsasha.com, it scrolls down perfectly but on french, even though setting different ids, doesn’t scroll at all. Any help please? The ids are on the submenus of hair-salon and spa for english, and salon de coiffure and spa for french.
Hi,
There are a few issues on your French page:
1.There are no targets with the ids you have on your links. For example, on
http://test.maisonsasha.com/fr/salon-de-coiffure/there’s nocoupesorbrushing-mise-en-plistarget (i.e. no elements with those ids).2.Your web server redirects all requests without trailing slash. This means that you need to add the trailing slash on your links URL. For example, you should change your link “COUPES” from:
/salon-de-coiffure#coupesto:
/salon-de-coiffure/#coupes3.Your French site URL is
http://test.maisonsasha.com/fr/. Right now, your links point to the English version (http://test.maisonsasha.com). You need to change your French links URL to point to the French version by adding the/fr/fragment in their URL. For example, you should change your link “COUPES” from:/salon-de-coiffure#coupesto:
/fr/salon-de-coiffure/#coupesSo, to summarize:
Add the targets to your French page (as you’ve done in the English).
Change your French links URL, so they start with
/fr/and have the/before the hash (#).Hope this helps
Hi,
page scroll 2 id is working fine for me and doing exactly what I was hoping for but it is not as precise as I hoped. The highlighted element in the menu changes to the next as soon as the next anchor is scrolled into display. Meaning, the highlighted element changes when the next one is only at the bottom of the screen which is confusing.
Is there a way the change the settings of the plugin so it only changes the highligh when the next section is already in the upper third of the screen?
Please excuse my unprofessional way of describing the issue. It’s my first time designing and building a website.
Thank you so much in advance.
Best regards,
Maria
Hello,
There are more than one ways of changing the way links are highlighted. Can you post your page/site URL so I can check what exactly happens?
Hey,
thanks for the reply. This is the URL:
https://carbonbikerepairs.de/
The highlighted Link in the menu changes as soon as the next section shows up at the bottom of the screen. In my case I think this is a bit confusing for the user.
Thanks so much for your time.
Kind regards
Maria
Since you’re using the Elementor page builder, the best way to add the targets is the one described here:
http://manos.malihu.gr/page-scroll-to-id-elementor-guide/
Elementor Page Builder allows us to enter an id value for each element we want (via the CSS ID field). This is very handy as a)we don’t need to create our id targets manually and b)makes links highlighting easier and more precise (see post above).
I would use the way above and disable the other options you have enabled like “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target”.
Thank you so much for this advice! Scrolling is much smoother now, highlighting of the menu not 100% percise, but good enough 😉
I think you created an amazing tool and the support you are offering here is awesome. Especially for wordpress newbies like me.
Cheers, Maria
Plugin is working great except that the setting “scroll from/to different pages” doesn’t seem to be working on some pages, even while internal links work correctly on that page. But other pages don’t seem to have the issue, so clearly there’s a problem with the page content.
On the page where it’s not working, the page loads with the anchor tag, https://example.com/mypage#foo but then the anchor changes just to #, https://example.com/mypage# and doesn’t scroll.
The page with the issue is huge so if you have any suggestions before I start looking through in detail, that would be great.
Thanks!
Please post your page URL that’s not working so I can check what happens. If I see your page I’d be able to help.
I have activated the plugin but the two new icons (setup link and bull’s eye anchor) are not appearing next to the standard text editing icons. I’m using the Juster Theme.
Thank you,
Hello,
Plugin’s custom toolbar icons work only on the old classic editor (WordPress version 4.x).
WordPress version 5 uses the Gutenberg block editor which doesn’t allow such buttons. For this version, “Page scroll to id” provides the “Page scroll to id target” block for creating the targets.
In addition, all links created in the default editor will work with “Page scroll to id” by default (with plugin’s default selector option).
For more info, please check the links below:
Creating id targets in post block editor (Gutenberg)
Creating links in post block editor (Gutenberg)
Hi,
I have a problem with my site. For some reason the page jumps back to top when i click on the menu links.
I suspect this was caused by some update, but i can’t figure what’s the problem.
Thanks in advance.
Hi,
Your theme uses its own functions for scrolling the page. These functions seem to conflict with “Page scroll ti id” as both are trying to do the same thing.
The theme scripts that do this are:
...themes/croma/js/main.jsand
...themes/croma/js/barba.min.jsIf plugin’s “Prevent other scripts from handling plugin’s links” option cannot resolve this automatically, you’ll need to see if there’s an option in your theme to disable its smooth scrolling feature.
Hi,
Thank you for this plugin. I’ve got an issue on my website when I’m scrolling down to the bottom of it (in fact the footer). At this moment, the highlighted menu will be not the last one, but the second one.
Of course the footer don’t have any entry in the menu.
Have you got any idea to fix it ?
Best regards.
Eric
Hi,
I’m not sure I understand the issue but if the footer doesn’t have an id and menu entry, how/what link should be highlighted?
Can you post your site/page URL and explain a bit more what you need?
Hi,
Currently, my website is private (still under development). I just sent you an email with all the informations you need to the login.
Thank you for helping me.
Hi, I really appreciated your help to fix my issue.
Now everything is working well 😉
Awesome! Glad I helped 🙂
I was using this on a page with a vertical timeline which is working great. The user would press a button that would start the autoscroll to the end of the timeline. However, is there a way to stop the autoscrolling during the middle of it if the user wants to stop? For example, there is a post on the timeline halfway through and the user uses their mousewheel to scroll back up, it there a way to stop the autoscrolling because right now, it just keeps scrolling down.
Thanks!
Go to plugin settings and enable (check) “Stop page scrolling on mouse-wheel or touch-swipe” option. Save changes and test your page. I think this is what you need.
Hello,
Thank you for the nice job. I have got a problem with the scrolling. I don’t need smooth scrolling, I need just to jump. I tried to set the scroll duration but nothing happend. Can you help me?
website: http://www.nomadpartysator.hu
Thank you!
Hi,
Your theme uses its own js script for scrolling the page (the script is
...themes/sydney/js/main.min.js).I saw that you’ve already tried to use plugin’s “Prevent other scripts from handling plugin’s links” option but it seems that the plugin cannot remove the theme’s functionality automatically.
You need to check if there’s a theme option to disable smooth scrolling (or change its scrolling duration/speed). If the theme does not provide such option, then you’d have to manually edit your theme’s
main.min.jsfile (not sure if you want to do this though).Hey there,
Awesome work. Thanks so much for building this. One small issue: when i click a link it’s scroll but it scrolls under container-wrapper or Header menu. http://www.innovatorit.com/photoshop/ You can see here. Please help me how can i fix the problem and solve the problem asp.
Hi,
When you have sticky headers in your page, you need to use plugin’s “Offset” option.
To offset scrolling according to your top sticky header element, go to plugin settings and set the “Offset” option value to:
.wgl-sticky-headerSave changes and test your page.
Hi, thank you for the awesome plugin! I was able to make it work without issue. Though I have a question…
On my page, I have the following sections…
Home (clicking on it scrolls to top)
About
Services
Contact
I was able to set the other links to be highlighted when scrolled to respective section. But how do I get the “Home” link to be highlighted when I’m at the top of the page?
Hello,
I’m guessing you’re using
#topto go to the top, right?If yes, you should either add the id
topto your first/top section (or body tag) or some other id if you want to keep “top” for something else (e.g. you could use#home).In short, you need to create an additional id, like the ones you already have, for the top of the page.
Hope this helps
Gosh! How did I not think of that!? Problem solved! Thank you very Malihu!
Glad I helped 🙂
Hi. Great plugin.
I followed all the steps, created a nice menu, put the custom CSS on the right place, but when I click on the menu it still jumps to the page instead of smoothly scrolling down (or up). Any idea why this might be happening?
Hi,
I just replied to your support request in the support forum:
https://wordpress.org/support/topic/jumping-to-page-instead-of-smooth-scrolling/#post-11961079
Cheers!
I checked “Allow only one highlighted element at a time” and yet once I stop scrolling, two or more items on the menu are highlighted. seems like a bug.. any idea what I should do?
Thanks, Gal.
Same issue here. Please help. Thank you. –Adam
This is a multi-page site and I was hoping this plugin would not reload when clicking # links from the same page. Is there something in the setup that I am missing that would help with this?
Try going to
http://cmcnycdemo.flywheelsites.com/about-cmc/#mission
and then clicking on “About > Values” in the menu. You will see it reloads the whole page first. Would love it just to scroll when on the same page.
Thanks!
Hi, I’m using the theme Ovation. I can’t seem to get the right CSS selector to put in my offset. It just doesn’t work.
If I don’t offset anything, it works perfectly well on my mobile, but not my pc. When I set 165 pixels as an offset, then it works fine for my pc, but not for my mobile.
Any help would be appreciated!
Hey, I just discovered your plugin, and it really helped to get my anchors right. Thank you! Everything seems to be working fine, but one thing keeps me puzzled… When I go from a lower section to a higher section, it scrolls all the way up to the menu and back to the higher section from there. Can I do anything to avoid this? I am using WP + Generatepress Pro here https://test.timeisnowfoundation.org/
Thank you!
Eva
Hi,
how can i recalculate the Positions for Highlighting (or maybe reinit the Plugin) when i have some Accordions inside the Content?
When expanding a Tab from Accordion then the Menu (Sticky) is highlighted wrong (too early)
I have already tried with the Options in the Plugin but with no success
Can you post your page/site URL so I can check it?
Hey! Awesome Plugin with many settings, great.
The smooth scrolling works perfect for links within the page but does not work from the menu / navigation.
Please check out https://www.privacy-top20.com/en/start-en and click “Data protection products” (
https://www.privacy-top20.com/en/start-en/#datenschutz-anbietervergleich). It jumps to the right area but not smooth. When I scroll to the bottom of the page and click on the button “Free, fast and easy! Start now” then it is percectly smooth.
Can you please help me to archive also smooth scrolling when I am clicking in the top menu “Data protection products” ?
Thank you
Florian
Hi,
Your “Data protection products” top link does not have an actual URL with a valid id. Its URL is just
#.You can test this by hovering your cursor over the link and seeing the URL at the bottom of the browser window
https://www.privacy-top20.com/en/start-en/#This link (“Data protection products”) is handled by another script (I don’t know which one because your js code is minified, concatenated etc.). I can see the code that handles this link in the HTML:
<script> jQuery(".tab-category > a").click(function() { window.location.href = "/en/start-en/#datenschutz-anbietervergleich"; }); </script>As you can see from the above, the script appends the actual URL programmatically when the link is clicked.
I assume that the script does this because the link has a sub-menu, although I can’t say why it’s done this way.
Note that this happens only on this particular link (because it has a sub-menu). If you create a new link in your top menu with a URL
#datenschutz-anbietervergleichor/en/start-en/#datenschutz-anbietervergleichit will work as expected (just like “Free, fast and easy! Start now”).I don’t know if you’ve added the correct URL (e.g.
#datenschutz-anbietervergleich) in your “Data protection products” link and the theme or another plugin removes it(?). In any case, when the page is loaded, the “Data protection products” link URL does not have a target id (just the hash).All this means that you cannot fix it with “Page scroll to id” because it’s not an issue with the plugin, so I can only explain what causes of the problem.
Hope this helps
So I have installed your plugin and have been using the # id tags in the menu custom-links and only 2 of the menu items are scrolling and I cannot figure out why. If I could get some help that would be great.
Only 2 of my menu links are scrolling, I am confused as to why they all are not working when I have the url and the # the same. Please help. Thank you
Hello,
You links are not the same. The ones that have
/home/in their URL do not work because you don’t havehome.You need to change your links to be like the “About”, e.g.
http://sigsolar.tiaradesignsco.com/#aboutand nothttp://sigsolar.tiaradesignsco.com/home/#aboutIn addition, your “OUR TEAM” button URL is not correct. It currently is:
#Our Solar ExpertsIt should be:
#our-solar-expertsI’ve installed your plugin but it isn’t working – clicks to in-page anchor links are jumping rather than scrolling. I tested another similar plugin and it scrolled OK, although doesn’t give nearly as much control as you offer; so I am confident my anchor links are set up OK however would really like to get your plugin to function.
The page is the home page of a new site archicadestimating.com. I have a sticky menu set up with links to each anchor section of the page.
I’m using the standard selector:
a[href*=’#’]:not([href=’#’])
I tried adding the ps2id class to all of the anchors; this did not make any difference.
I have checked the box to “Prevent other scripts from handling plugin’s links (if possible)” but it didn’t help.
I’d be very appreciative if you have suggestions or can tell what needs to be changed to make the plugin scroll properly.
Thanks in advance for your assistance!
Eric Bobrow
Hi,
The issue is that “thrive-visual-editor” prevents “Page scroll to id” from scrolling the page. You did well by enabling “Prevent other scripts from handling plugin’s links” option but this option cannot always fix such issues, mainly because it depends on how the other scripts are handling the menu links.
In your case, the “thrive-visual-editor” applies a click event on the link and its parent list-item, which stops the plugin from scrolling the page.
I have no idea how the other plugin you tested was scrolling the page but my guess is that it probably created its own links (i.e. it did not use your theme’s menu links). I can;t really say though.
You need to check if there’s an option in “thrive-visual-editor” to disable page scrolling for same-page links (i.e. links with
#in the URL).FYI, the script that handles your menu links is this:
...plugins/thrive-visual-editor/editor/js/dist/frontend.min.jsIf there’s no option to disable “thrive-visual-editor” from handling same-page links, then the only other way would be to manually edit the file above or add a special custom js script in your theme that’ll remove “thrive-visual-editor” events from both the link and its parent list-item element.
Thank you so much for answering so clearly. I worked around the issue by creating a version of the menu as plain text (with hyperlinks) rather than using Thrive Themes option for a custom menu element.
While it was fiddly to get it styled nicely, the scrolling actions work perfectly. I appreciate your expert guidance on what was causing the issue, which allowed me to assess a reasonable work-around for the click event conflict.
Hello, I think I setup the thing properly but when I scroll nothing happens. It scroll to the other section only with mouse click. I guess I missed something?
My theme is DIVI, the plugin is on, in CSS ID, I inputed 1,2,3,… as ID then on link I put #2,#3,#4… maybe that’s where I am wrong. I’ve read the post about DIVI many times but I am stupid, I cannot use it…
Hi,
Please tell me what page and which links to test.
the homepge so https://kokoropanier.com
Each image should bring to the next picture when scroll. Here I only succeed to do it on click…
Your image links (with the arrow) do not have a target id. Their URL is just:
#You should set the next image target on your links. For example, the first image link should be
#2, the second#3and so on…You should also go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option because your theme (or another plugin) has its own function for scrolling the page.
Thank you.
Actually for the arrow, that’s a theme option. I’ve assigned a target #2 to the module. Hence two things happen: when you click on the image it goes to the next picture (as you described above) then the arrow function does not work anymore.
My question is why the scroll does not work in that case? only the click works.
The pictures target ID is set (#2,#3,…) but on scroll nothing happens, is it normal?
sorry, I meant on mouse wheel.
It seems that your theme has its own custom way for scrolling the page by clicking links and via mouse-wheel. This prevents “Page scroll to id” (or any other similar plugin) from handling links and scrolling the page.
The way your theme navigation works, you can’t really use other ways, other than its own functions, for page scrolling.
OK, I see, Thanks for you time and help.
Do you have a short video demo, that shows clear up -close steps
It would be most helpful
I am trying to link from a text button to an image and also another one to a text on the same homepage.
I am working on a localhost development pc. so I cannot give an URL
Thank you in advance
Really stuck right now
Frances
You can check the plugin’s tutorials here:
http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/
http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#video-tutorial
Hi. Thank you for this nice plugin. I seem to be having trouble getting it to move to the correct positions. I tried using the offset to account for the sticky header. I assume it has something to do with the lazy loading. But even then some things seem very off. Wondering if you have advice about that. Specifically this link https://bedlam.org/support/#special-recognition which seems to go very far past it’s id target point. Thanks for any feedback you can provide.
Hello,
The issue with the last link is because of the lazy loading of the images in the “OUR DONORS” section.
On the desktop, these image placeholders have a height of 242 pixels but when the image is loaded, their actual height becomes 129 pixels. This is 113 pixels difference and since you have 4 rows, it’s 113*4 pixels.
So, scrolling to “SPECIAL RECOGNITION” section the first time (before the “OUR DONORS” images are loaded), is off by about 400 pixels (the second time you click the link, it scrolls to the correct position since the images are loaded).
This issue will happen with or without “Page scroll to id”. The only way to have lazy loading images and correct page scrolling is giving your image placeholders the same height as the actual images will have when loaded.
Hope this helps
In addition, “Page scroll to id” provides an option to deal with such issues, so try the following:
Go to plugin settings and enable “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option. Save changes and test.
Hi. Thanks so much! I did click “Verify target” option, but it doesn’t re-adjust. However, I will try sizing the place holders and let you know.
I set a max-height on the image containers and it worked! Thanks so much for the advice!
The only thing now (and it’s not a big deal) is that there are internal links on this page that are not smooth scrolling. https://bedlam.org/learning/
You will find them in the “Classes” area in the descriptions where the instructor’s names are linked. I added the ps2id class to the links, but they still jump instead of being smooth. Any idea how to fix?
Thanks again!
These links seem to be handled by the “wp-accessibility” plugin, which prevents “Page scroll to id” from scrolling the page. The script that handles them is this one:
...plugins/wp-accessibility/js/skiplinks.webkit.jsI saw that you’ve already enabled “Prevent other scripts from handling plugin’s links” option, which means that you’d have to manually edit this script or deactivate the “wp-accessibility” plugin or add an extra js code to your theme template.
Let me know
Ah! I see. Okay. I prefer to keep the accessibility plugin. The page jump on these links is not a big deal. Thanks for looking into it!
Great plugin! I do have one small issue I can’t seem to figure out. I use Divi and I can’t get the offset option to work on my fixed navigation on mobile and tablet. The navigation is fixed on desktop and works flawlessly, however, not so much on the mobile and tablet.
Can you please help me with this? If you need any more information from me, I’d be happy to share.
Thanks again for a great plugin!
Hello,
This happens because Divi theme has its own function for scrolling the page. This prevents “Page scroll to id” from doing its thing.
Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Also change the “Offset” option value to:
.et_fixed_nav #main-headerSave changes and test.
Let me know 🙂
Hey there,
Awesome work. Thanks so much for building this. One small issue: I can’t seem to get the “Allow only one highlighted element at a time” and
“Keep the current element highlighted until the next one comes into view (i.e. always keep at least one element highlighted)” options to work as expected. I have them selected in the plugin settings and I’m still seeing the opposite behavior. Can you assist?
Thank you!
-A
Hi,
In order to use these options effectively, you need to limit which links get highlighted. You can do this by going to plugin settings and setting the “Highlight selector(s)” option to:
#StickyProjNav .menu-item aSave changes, test your page and let me know
Hey there,
That definitely helped, but I still cant get the roll-over highlighting to work.
Also, is such a menu depoly-able to multiple pages on the same site? I’m having trouble getting that to work as well but it may be a function of whatever I’m missing.
Thanks for your help,
-A
Most likely yes. You’d have to ask the menu plugin developer on how to use it on multiple pages.