I am using the following script to enable scroll snapping:
<style>
.scroll-snap-wrapper {
overflow: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
.section-waitlist-lp {
height: 100vh;
scroll-snap-align: start;
}
.section-waitlist-lp-last {
scroll-snap-align: end;
}
.scroll-snap-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-snap-wrapper::-webkit-scrollbar {
display: none;
}
</style>
Now an anchor link that I set on one of the buttons …
<a id="lp-button-2" href="#buttontarget" class="button-waitlist-lp-secondary w-button" style="display: block;">Find out more</a>
… doesn't work anymore, targeting the second section on the page
<div id="buttontarget" class="section-waitlist-lp wf-section">
I had a look at this question + answer on here based on this solution, but it didn't work for me. The staging site can be found here.
Any ideas? Thank you!