WF Scroll to an element within a scrollable group

Need help Responsiveness
21

You must specify the quotation mark character correctly - " "

If you copy from the forum and paste it into the bubble editor, the quotes will not be correct

Just delete them and re-install them in the editor

image

2024-07-22_15-22-26

22

!!! SOLVED - Attached demo project

Test it out - Bubble | No-code apps
demo builder - Scroll to Element JS | Bubble Editor

Requirements:

  1. Toolbox plugin
  2. Make sure you have ID attributes exposed for each element under settings>general>bottom of page
  3. name the element that scrolls - I named mine scroller
  4. name each element you are scrolling to
  5. make sure when you copy/paste the scripts that you re ad the “” quotations when entering the custom element ID names. For some reason it doesn’t copy and paste correctly - it looks close but its incorrect.

Scroll to specific element script below:

var parentElement = document.getElementById(“scroller”);
var specificChildElement = document.getElementById(“scrolling_to_element”);
specificChildElement.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ });

Scroll to top script below:

var divElement = document.getElementById(“scroller”);
divElement.scroll({
top: 0, behavior: ‘smooth’
});

23

Hey, thank you for the nice instructions and the solution. Could you make the demo builder publicly accessable please? Currently we do not have permission to view the app.

Thank you!

24

Should be good now

I tried fixing the demo view but something about a banner I cant figure out but the editor is good to go.

25

It worked like a charm. Thanks for sharing! :folded_hands: