smooth scrolling to anchor not working
-
Hello, I'm trying to figure out how to make a custom link in a menu make a smooth scroll to an anchor on the same page, it's driving me nuts at this point tbh :D It always just jumps to the anchor with what seems to be a reload of the page but not with a smooth scroll.
My setup is: I have custom links in a menu (www.mysite.com/#tag) and I have given some elements on the page an ID, I also declared their class as "anchor".
I tried using the code from these threads (and many more), but nothing worked:http://laythemeforum.com:4567/topic/2863/link-to-anchor-from-another-page
http://laythemeforum.com:4567/topic/7463/scroll-behavior-smooth
http://laythemeforum.com:4567/topic/4200/definitive-guide-to-smooth-scroll-to-anchors-from-menuAs I have basically no coding knowledge, I can't really figure out what I am doing wrong currently, so help would be greatly appreciated
-
So I just made a simple test page (https://lukasrabl.com/test/) and the scroll animation is working perfectly fine there, using this Jquery code:
<script> jQuery(document).ready(function(){ jQuery('body').on('click', '.js-scrollTo', function(event) { event.preventDefault(); var id = jQuery(this).attr('href'); jQuery('html, body').animate( { scrollTop: jQuery(id).offset().top }, 750 ); }); }) </script>
The links I used were in elements on the page itself, like in a text box. But when I use links in the menu to scroll to different parts, it doesn't work. So maybe the error is somewhere there?
-
I fixed it, it was just because my links had a slash before the #hashtag.
So I wrote www.mysite.com#tag instead of www.mysite.com/#tag and it worked immediately.
-
hey dont use custom jquery code for smooth scroll animation
the smooth scroll is already active by default
just follow this tutorial and you're good to go:
https://laytheme.com/documentation/jump-to-anchor.html
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