Scroll to top within a Pop up / floating group

[mmendezgracia]

Hey there,

I have a floating group with a scrollable product info inside, but if user close the Floating group in the middle of the info and then open another product, the floating group shows the info in the middel (when user closed before)

I tried with scroll to action but doesnt work. I tried with set focus to input but on android the input open the keyboard so that not work neither.

I know there is an option with javascript ( I read in the forum) but I dont know how to execute.

If you guys know how to execute please help.

Javascript code:

var javascriptpageid = document.getElementById(“elementID”);

javascriptpageid.scrollTo(0,0);

elementID I have to change for the ID of the element.

[startups.victor]

To run this js on button click, Install the plugin “Toolbox”

Then you will have to add an action to “whatever triggers” the popup or floating group to show e.g The button that shows the popup/floating group

action—plugins—run javascript----paste this code

let element = document.getElementById("your_popup_id_here");
element.scrollTop = 0;

[startups.victor]

.

.

I hope this helps !

[mmendezgracia]

Thanks Victor! I think Im doing exatly the same but still doesnt work

sending images

action to open de floating group:

the element floating group:

here is what is happening:

[2706mason]

I’ve had this same issue. Can’t get a floating group to scroll to the top on a button click for the life of me. Have tried the above methods with no luck.

[ihsanzainal84]

Check that you are referring to the correct element. It could be the scrolling element is not the floating group but instead a child element of the floating group.

You can check this by using the browser inspecter. In your preview right click on the scrollbar, inspect and check.

You can also run your code in the inspector console to test if it works.

[mmendezgracia]

Thank you, I did it, each group inside the floating group and didn’t work.

[startups.victor]

Hi @ mmendezgracia
So sorry I’m just seeing this…

Here is an easy fix:
Simply wrap all the content of the floating group/popup inside a group.
Here’s an example (from the elements tree)

So instead of attempting to auto scroll the “floating group/popup” on button click
you now have to auto scroll the Group wrapper…

please don’t forget this … also remember to remove the I.D attribute “scroll” from the floating group (from your initial setup )

The work flow remains the same , make sure you are referencing the right element…

[mmendezgracia]

Thank you very much Victor for your time showing the steps, unfortunately I did the same you show but I don’t have the same results.

Only I can add that inside the pop up I have more groups (3 level of groups). Could be here the issue?

I put the id to de wrap group, and leave the group with the settings you are showing.

The others groups inside I unchecked the auto scroll and the fit with the height. Because if alI check it, the pop up scroll by each group and not like an entire big group.

[mmendezgracia]

Ok just for close the topic, first, LET ME SAY THANKS TO @startups.victor, He keep helped me by message until the problem was solved, he reviewed and troubleshouted my app friendly. Thankyou very much again Victor.

Here the solution. (that complement all the remmended above)