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.
Unlock the secret to smooth scrolling: Learn how to instantly jump to the top of your one-page Bubble app without annoying animations!
Master custom states in Bubble: Discover the simple JavaScript trick to enhance user experience in your responsive web app design.
Tired of clunky page transitions? Transform your Bubble app's navigation with this game-changing custom CSS solution!
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.