Scrolling to an anchor
-
Hello.
I have the following problem: with LayTheme v3 my anchor scrolling does not work properly anymore.
On the bottom of this page: https://anime-architecture.org
I have two links to "Imprint" and "Privacy Policy". Those two links expand a div called "legal" and then should scroll that div upwards in the browser. But they don't.On a copy of that website, running on LayTheme v2 this still works: http://jardinsdespilotes.com/en
Same thing with the links in the footer.Can you please help me with that issue?
Thanks a lot and cheers,
Arne -
Dear @ArneRobot
I do apologise for the late reply, this one got through without me realising!
Could you post the Code you are using to create this jump?
Additionally where are the other two links of "imprint" and "privacy" located outside of the footer region?Best Wishes
Richard -
Hello @Richard-Keith,
here is my complete custom JS-code from "Custom <head> content". Do you need to see any CSS styles as well?
<script> jQuery(document).ready(function(){ jQuery('li.menu-item.scrollLink a').addClass('scrollTo'); }); </script> <script> jQuery(document).scroll(function () { var y = jQuery(this).scrollTop(); if (y > 200) { jQuery('.second_menu').addClass('visible'); } else { jQuery('.second_menu').removeClass('visible'); } }); </script> <script> jQuery(document).on('click', '.legal-trigger', function(event) { jQuery('#legal').addClass('visible'); }); </script> <script> jQuery(document).on('click', '.legal-close', function(event) { jQuery('#legal').removeClass('visible'); }); </script> <script> jQuery(document).on('click', '.mobile-nav ul li a', function(event) { jQuery('.mobile-nav, .mobile-menu-icon').removeClass('active'); jQuery('.mobile-nav').css('transform', 'translateY(-265px)'); }); </script>
And here are the links that are located in the pages "footer" and "fusszeile":
<p><span style="color: #f2f2f2;">© 2020 <span class="legal-trigger"><a class="scrollTo" style="color: #f2f2f2;" href="#legal">Imprint</a></span> <span class="legal-trigger"><a class="scrollTo" style="color: #f2f2f2;" href="#legal">Privacy Policy</a></span></span></p>
Let me know if you need anything else! Thank you!
-
Dear @ArneRobot
Thank you for posting the content :)
Im having a look and the JS is working on the second link <a> because the class "scrollTo" is there, & the jQuery can find & activate it.
However on the non-working this class "scrollto" isnt there? we've lost that class...
Can you add this to your footer's "legal trigger" <a> tag?
And see if then the JS can activate? it should be the key to making the code work, so long as the JS is identical for both pages.Let me know, and thank you for using Lay Theme :)
Sincerely
Richard -
@Richard-Keith Hello Richard. I have updated my code. The second click works and scrolls to the top. No matter if I click "Imprint" or "Privacy Policy" first. So I guess it has something to do with the "legal"-layer hidden in the first place. But anyway – it used to work with LayTheme 2.x and stopped working with 3.x
Thank you very much and cheers,
Arne -
Dear Arne @ArneRobot
Thank you for updating, your website is really cool btw :)
Just to confirm that it is working now?
But i agree that it is strange that the upgrade created the issue and will keep this thread noted for the future.
Thank you for using Lay Theme and apologies that this has occurred in the first place
Sincerely
Richard -
@Richard-Keith Hello Richard. Thanks for the praise for the website. :-) But unfortunatly it does not work, yet.
Like I wrote earlier, it worked with version 2.x of LayTheme which I still have installed here:
http://jardinsdespilotes.com/en (see the same links working in the footer)But with version 3.x it has stopped working:
https://anime-architecture.orgThe addition to the code didn't help. :-(
Thank you!
-
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it