Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Instant Scroll to Top without animation

Learn how to optimize your Bubble.io one page app by implementing a simple JavaScript solution to address the scroll to top issue when changing custom states.

Issues with One Page apps in Bubble

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.

The problem with scroll to top

So 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 the scroll too.

An easy solution that is not so great

So I change 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 going to see this is still less than optimal. Go to orders.

Issues with building a native mobile app or a responsive web app

Oh, and we have a, especially if you're building what is meant to look like a, behave like a native mobile app or a responsive web app. Yeah, this is not great behavior. And in actual fact, if you decide if you went 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. But let's put together a solution for custom states.

A JavaScript solution for custom states

So go back into our editor and we're going to need to add in a bit of JavaScript. So I'm going to go plugins and make sure that I have got the toolkit 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 going to paste in this tiny bit of JavaScript asynchronously.

Nothing that's going to make much difference in this case. Right now, let's see how it behaves. So I'm on dashboard, scroll down, I'm going to click orders. Boom, straight up to the top. The JavaScript runs instantly, there's no animation.

Testing the solution

Let's try again. Let's go back to dashboard. Boom, there we go. And get started saying boom, straight up to the top. So there we go.

A solution for scroll to top frustration with one page apps and custom states in bubble

That's how to counteract 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 of JavaScript to jump right up to the top of the page without any animation involved.

Latest videos

lockcrossmenu