Hey everyone! I have a group which allows vertical scrolling when the content overflows, now I’m trying to add an action on a button to scroll to this element within this group.
I tried the “scroll to element” wf action, but it doesn’t work since this references full page height, has anyone been able to achieve this?
Best to all
There’s a seperate scroll action for repeating groups.
It’s not an RG, since the new responsive engine you can allow the element to fit the content or have a max screen height and allow it to scroll, that “group scroll” is what I’m trying to achieve.
Ah okay sorry I misunderstood. You would be better off running Javascript for this using the Toolbox plugin.
I myself have had issues with Bubble’s native scroll to action.
I’ll give it a try, but wanted to avoid using plugins for this… Thanks!!
As far as I know this is not possible, because the bubble “scroll to” and “scroll position” etc. only interacts with the scroll of the main page that’s loaded and not with any other scroll from an scrollable (Floating)group on that page.
I fixed it with javascript that linked to the id of the (Floating) group.
I have asked ChatGPT if he knows how, and I got a answer. I didn’t try it but maybe it works.
Question:
I have a question about bubble.io I have a group which allows vertical scrolling when the content overflows, now I’m trying to add an action on a button to scroll to this element within this group.
I tried the “scroll to element” workflow action, but it doesn’t work since this references full page height? Do you know how to achieve this?
Chatgpt answer:
To scroll to a specific element within a group that allows vertical scrolling, you can use the “Scroll to element” action in combination with the “Find element by ID” action. Here’s an example of how you can do this:
First, give the element that you want to scroll to a unique ID by setting the “ID” attribute of the element in the Element Properties panel.
Next, add a “Scroll to element” action to your workflow and select the group that allows vertical scrolling as the element to scroll.
Add a “Find element by ID” action before the “Scroll to element” action and set the ID of the element that you want to scroll to as the value for the “ID” input field. This will find the element that you want to scroll to within the group.
Connect the output of the “Find element by ID” action to the “Element” input field of the “Scroll to element” action. This will tell the “Scroll to element” action to scroll to the element that was found by the “Find element by ID” action.
Add a trigger for the workflow, such as a button click, to execute the actions.
This should allow you to scroll to a specific element within a group that allows vertical scrolling when the trigger is activated.
Hi @jos2 I got really excited with the ChatGPT answer, but now there is no “Find element by ID” in the native actions in bubble. Did a quick search in the forum and couldn’t find any plugins that provide this action. 
Thanks a ton!
I’m having the exact same problem right now. Even tried making it a reusable element and keeping the “scroll-to” workflow in there, but still no dice.
Did it work with JavaScript code? And if so, which code did you use?
Hi @wesfrank in the end I opted to create a hidden group under the scrollable group and show it upon clicking a button, It solved my problem but didn’t find a solution for the underlying issue.
also looking solution for the same problem, but didn’t find anything in forum or any plugin to solve this issue
Ran into the same problem.
Luckily I have an RG on the page, so my workaround is to use this RG as an anker and use the WF “scroll to entry of RG” to achieve the “scroll to element” result.
The distance b/t the 1st item of this RG and the real destination element I want the page to scroll is the offset number.
Workarounds are never ideal but hopefully this helps others who run into the same issue.
Would you mind to share your js script?
I used this very basic script.
var divElement = document.getElementById("id-of-the-element");
divElement.scroll({
top: 0
});
In the workflow you need to run this script, but you need to run is when the element with the id “id-of-the-element” is visible, otherwise you will get an error.
Hey man it works! Thanks a lot!
if you even want a better experience and you have a little bit of code knowledge than you can create a plug from Smooth Scrollbar i created one and then you have smooth scrolling 
that’s really awesome
I solved the problem:
I had a group inside a group and I wanted the content inside the inner group to be scrolled so that the most bottom item is always shown.
This is what I did (with help from GPT4):
// Get the specific child element within the parent
var specificChildElement = document.getElementById(“scroll_item”);
// Scroll the specific child element into view
specificChildElement.scrollIntoView();
This worked like a charm - thank you so much!! I expanded it a little bit to add paramters that allow for a smooth scroll animation; specifically, I put the following in between the parentheses of the scrollIntoView function:
{ behavior: 'smooth', block: 'center' }
Reference documentation for additional Javascript options for this function an be found here.
Hi all! I’m excited you all have found a solution but I haven’t gotten this to work for me. I implemented the JS as everyone suggested. I have navigation buttons at the bottom which trigger the JS but scroll position is always somewhere in the middle or at the bottom when the workflow gets triggered.:
Here are my elements that allow vertical scrolling (scroll_to_top) and the anchor element inside the group (scroll_to_here)
