Instant Scroll to Top without animation

Custom States and Scroll to Top Issues in Bubble One-Page Apps

If you're building a Bubble one-page app and you're encountering an issue where when you change custom states to change what screen within the single page your user is looking at and you're having an issue with scroll to top, then this video is for you. I came off a Bubble Coaching call earlier on the week and the person I was working with was encountering this exact issue. Let me show you.

Demonstrating the Scroll Issue

We've got a really long bit of content on our dashboard, but then I want to swap to orders and I've also got a very long bit of content on my orders and like you can see it doesn't scroll up to the top of the page now. You may be thinking ah Matt, there's a very easy solution to this which would be we can use these scroll to.

Attempting a Solution with Scroll To

So I changed my custom state here and then I say scroll to an element. Now generally speaking, the secret here if you want to scroll to the top is you just select the page itself. So let's try that and you're gonna see this is still less than optimal go to orders. Oh and we have a... Especially if you're building what is meant to look like a or behave like a native mobile app or a responsive web app. Yeah, this is not great behavior.

Alternative Approach Using URL Parameters

And in actual fact if you decide if you weren't about this a different way instead of using custom states to dictate which group is shown if you were to use URL parameters turns out this isn't an issue. And you can follow a link down in the description to go and learn and find our videos where we use URL parameters to build one page apps.

Implementing a JavaScript Solution

But let's put together a solution for custom states. So go back into editor and we're going to need to add in a bit of JavaScript. So I'm gonna go plugins and make sure that I have got the Tool tool kit toolbox. Maybe I've not got it installed. Toolbox okay because toolbox allows you to run JavaScript in workflows. So now if I go to my workflow I can say run JavaScript and I'm gonna paste in this tiny bit of JavaScript asynchronously. That's gonna make much difference in this case right now, let's see how it behaves.

Testing the JavaScript Solution

So I'm on dashboard scroll down. I'm gonna click orders. Boom straight up to the top the JavaScript runs instantly. There's no animation. Let's try again. Let's go back to dashboard. Boom, okay, and get tired saying boom straight up to the top.

Conclusion

So there we go. That's how to counter a common frustration that I've seen with several Bubble coaches about using one page apps and custom states in Bubble because you can just use this tiny bit JavaScript to jump right up to the top of the page without any animation involved.