Anchor links are jumping to target #element instead of scrolling smoothly
BleXor opened this issue · 11 comments
Hello,
Because I need to have scroll-behavior: initial it does what it does as default - scroll jump to the target element. So if I want to scroll to element smoothly, I need to catch the click events for anchors and use Lenis.scrollTo(...) to make scroll smooth.
My question is if there are plans to handle this all in Lenis - for example with some parameter (for example { .., smoothAnchors: boolean, ... }) when initializing Lenis instance.
Yes, that's a known "issue", we're still trying to find the most seamless way to do it. A workaround is to listen to url anchor change and then use lenis.scrollTo.
Hey team, is this still an open issue? I tried using the suggested:
<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>
But if you click an anchor link before a scroll has came to an end you get a little jump in position when the previous scroll ends
@betawaxx can you provide a codepen ?
Hey @clementroche sure built a codepen, works perfectly (https://codepen.io/betawaxx/pen/eYreGBw)
My troubles start when I try use it with a cms like Webflow, I've prepped a demo project here: (https://lenis-test.webflow.io/)
You'll notice when you click multiple anchor links in quick succession, or even the same one twice quickly, there's a jump. This also happens if you scroll and click an anchor before the end of the scroll -- probably just a webflow defect but wondering if there's something I'm missing with the repackage?
You're using an old version of Lenis (0.1.12) on codepen try with the last one. About the jump it's because of the easing, every time you scrollTo it will start the animation again. i'm not sure we can do something about it. What the behavior you're expecting for ?
@betawaxx is this still an issue? i've tested both your links and seem to be working fine with latest updates on Lenis. feel free to open again if the issue still exists in your environment. also if you're using webflow please make sure you're on 0.2.7 since the bundled version was not exposing Lenis in 0.2.6
@arzafran sorry for the delay, I added 0.2.7 on Webflow and still have the same issue on anchor links. I think it is trying to carry out both scrol commands, here's a screen rec to show the 'jumps'.
https://filebin.net/gtfwevavs8xkt67u
I can also suggest another QOL improvement for Webflow if you are keen on adding, the onwheel attribute is reserved by Webflow so applying it requires we set a HTML embed and include the content inside that which is hugely limiting... Maybe you could add a substitute for onwheel, I believe they have onscroll as an available attribute.
Regarding the "anchor link jump" i updated your codepen https://codepen.io/ClementRoche/pen/xxjYvWj with the last lenis version and it's working perfectly. It seems like you (or Webflow) are doing extra stuff.
About the stopPropagation, onWheel is indeed mandatory since Lenis is based on wheel events. you can also use custom JavaScript script and data-attribute (data-stop-wheel-propagation) to automatically stopPropagation on desired elements.
@clementroche ah please disregard the code pen.... The issue with anchor link jumping is on the Webflow project -- try it yourself here: https://lenis-test.webflow.io/
Thank you for the pointer on stopPropagation, I'll look into that!
I cannot rely on Webflow because too many things are running behind. I really need a codepen as minimal environnement.
hey @clementroche , does this mean we no longer need a data-target attribute on webflow and instead use the usual link to section option ? i am sorry but i can't get this code in the last codepen to work on my site.