Javascript to Scroll an Element

Questions
1

I have a group that is using some custom CSS to apply a scrollbar.

I want to be able to trigger an action to scroll this specific group, but do not know how to apply the javascript. I’ve search the forum and online and have a general understanding of what should happen but can’t make it work.

I can get the page to scroll with a javascript action with this code

window.scrollTo(0, 0)

Any code that can take the group element id that has the overflow through CSS and use this same type of javascript but scroll the specific element rather than the page?

2

i come with 2 straightfoward ways:

Using an Href (link that can be applied with bubble editor) in the trigger ie:

<a href="#elementID">   </a>

<div id="elementID"></div>

using scrollintoview()

document.getElementById("#elementID").scrollIntoView()

Check this for more answers!

3

Thanks @tgmoron

I actually came across the stack overflow thread you linked in my search prior to posting this. When I have been attempting the different approaches I have found, I am unable to get any of them to work inside of Bubble.

From what I understand of the scrollIntoView function after reading multiple sites about this, is that it will scroll to the point of making the element visible (I may be wrong about that). However, I am trying to make it so the element that I have applied the scroll bar to using the overflow-y property in CSS, which is visible and the user is scrolling down the element using it’s scroll bar, I want to allow that element to be scrolled to the top, so the content at the top of the element is once again the focus.

Something I found online that I think does this is the below code

function scrollToTop (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight;
}

I tried to set it up in my page but can’t get it to work. This is how I have it setup.

Screen Shot 2021-10-19 at 9.13.01 PM

The element has this ID

Screen Shot 2021-10-19 at 9.09.29 PM
Screen Shot 2021-10-19 at 9.09.29 PM347×780 29.4 KB

And the CSS applied

Screen Shot 2021-10-19 at 9.10.00 PM

But as a non-coder I have no idea where I am going wrong with it. Any insights on how to set it up in Bubble to get it to work?

4

This actually does do what I want…tested things out with it and changed my ID structure.

This is how I have it and it is working.

Screen Shot 2021-10-19 at 9.23.07 PM
Screen Shot 2021-10-19 at 9.23.07 PM342×784 30 KB

Screen Shot 2021-10-19 at 9.22.56 PM

I’m not actually referencing the element that has the scrollbar applied to it, but rather the element that is at the top of the container.

I am needing to have the element that has the scroll bar applied to maintain the ID as below

Screen Shot 2021-10-19 at 9.24.40 PM

I need this as I am using the classify plugin to apply the Custom CSS…do you know what I would need to do to change the reference in the javascript? Instead of using #profile and instead use the green or orange id?

5

Oh, i reviewed everything again, and i thing i get it now.

i built a codepen to check if this is what you want to achieve:

https://codepen.io/tomigm/pen/NWvrwyJ

some things:

  1. When naming id’s avoid using the '# ’ before the name (ie: ‘#profile’; rename it to ‘profile’)
  2. Is your run javascript WF being triggered by a button or it just triggers when page is loaded?
  3. green or orange are classnames, you can reference them in JS with document.querySelector(’.className’) instead of getElementById. If using the classify plugin, you have the option to add a class and n ID at the same time: ElementID{addClass:“green”} (check classify’s original post for this)

I don’t completely get the last question, do you want to make the reference dynamic in javascript or you dont know how to select the element? :thinking:

6

This is awesome, very helpful and really clears up my confusion on things. Thank you for this.

  1. Javascript is going to be triggered by the click of an element. At the bottom of the element, which is a display of a profile data, there is a list of similar profiles and want the user to click a similar profile and scroll to the top of the element when the new profile data is loaded in.

This is very helpful to know. I didn’t know that classify allowed for both ID and ClassName and honestly didn’t really even know there was a difference between them. This is going to help me moving forward for sure.

Just didn’t really know how to reference the element in the javascript, but point 3 you made makes it pretty clear for me. Also gives me an understanding of things so I could know how to make the reference dynamic if need be.

Excited to make use of this, as it will also help me tinker with other javascript functions I find online.

Thanks again.

1 Like
7

Glad to help! You should check w3schools(easier)/developer.mozilla for further reference for javascript, it’s possible to pass parameters into the scrollintoview to make it scroll to the top/bottom of the element.
Go back to the Codepen and fiddle through the JS code, i wrote some comments to guide you :grinning_face_with_smiling_eyes:.
Beware with document.querySelector(’.class’), since based in classes, it grabs EVERY element that has that class in the document. If you want to reference a particular element, you should use an ID (which must be unique per item).
ie: if you have

<div class="red"></div>
<div class="red"></div>
<div class="red"></div>

let elements = document.querySelector('.red')

‘elements’ are going to contain those 3 elements (its an array of divs technically), and the code will fail (because it doesnt know explicitly which of them u want to reference.

I would use this in your bubble editor:

this for the workflow (where scrollTo is the function name, id is the parameter):

    function scrollTo(id) {
// we get the element by its id, passed as a parameter to the function
    	let selectedElement = document.getElementById(id); 
    	selectedElement.scrollIntoView();
    	console.log(selectedElement)
    }

and for the trigger you should run function scrollTo with the id of the element as a parameter. In code it would be scrollTo(“elementId”) .

Never is a bad moment to reccomend this course :grinning_face_with_smiling_eyes:

1 Like
8

Thank you again for this. The aspect of multiple elements with same class would have definitely thrown me off.

This gives me a lot of helpful info to start testing my hand at things. Also bookmarked the linked course.

I’m really interested in understanding more of javascript as I believe it will help me in my next large undertaking on Bubble to try my hand at creating a plugin.

1 Like