I need a bit of help, because I cant figure this out using the Pinegrow UI. I have a button that is supposed to take a user from that section to a lower section on click. But the sections are hidden by default, using the Hide on Start interaction. I added an interaction to reveal those. Works. BUT when I add an interaction to scroll to an id. It does not.
Since the href=“#id” won’t work on an element that is not in the document flow, I thought about assigning a new timeline to the interaction. That timeline will get an interaction of scroll to and the target is sent to #ID. But that does not work! The default ID the timeline works on is the triggering button or link normally this needs to be the window object in JavaScript.
If I change the target of the timeline to body, then it does work. There are some problems like if the ID isnt written with the # character (why have that if you can only use an ID?) or if you don’t use the $ to select the body in the timeline target field. (why are there two target fields?)
There has be an easier way, right? I have a feeling that I am missing something inside the Pinegrow editor, and hope any of you can help me figure this out.
In JS this is maybe 5 lines of code, but I am trying to learn how Pinegrow does this natively.
And these days I think this is a bit easier done in CSS alone, so if JS fails for some reason it still works. (although that’s a different argument)
Thank you for the comment and example. (The resulting Pinegrow web editor view (edit) should be used in many more examples! Its a very good way of showing how something is supposed to work!)
It does work, but it seems clunky, since you have various ‘shortcuts’ like Scroll Scene, and Hide at Start, etc. I must also say that I found it very difficult to find documentation that explained this well. You have a lot on carousels, sliders, etc, but very little on ScrollTo. Maybe that I simply search differently? The same goes for the Apply To Many? I didn’t understand how that applies at first.
May I ask if that event listener is then attached to the window object or if the selected html/body element?
Event listeners are attached to the target directly (in this case the button).
Apply To Many copies interaction actions to all elements that match the given selector, and event handlers then get attached directly to those elements.
Yes, there is a lot of opportunity to provide more examples and better documentation.
