Scroll to Element Plugin
The Element Scroll instance gives you precise control over in‑page navigation and user focus without writing any custom code. Configure the Target Element ID and Parent Container ID fields to point at the element you want to reveal and the container you want to scroll. Adjust Animation Duration for smooth transitions or leave it blank for instant jumps, and fine‑tune the final position with a Vertical Offset.
Under the hood, Element Scroll snapshots your current scroll positions—and publishes them as Current Page Position and Current Parent Position states—so you can always return users to where they came from using the Scroll Back workflow action. Both actions fire clear workflow event triggers when complete, making it trivial to chain animations, UI highlights, or analytics events in your workflows.
This plugin enhances UX by guiding users through long forms, tutorial steps, or dynamic lists. Advanced developers can leverage exposed states to record scroll behavior for analytics or trigger monetization features—such as revealing in‑app promotions when a user reaches a specific section. All scrolling happens client‑side at zero server cost, ensuring your UI stays snappy and your Bubble workload‑unit usage remains rock‑bottom.
Step‑by‑Step Guide: Using Element Scroll
-
Add an Element Scroll instance
Place the Element Scroll instance onto your page where you need programmatic scrolling. No other elements are required—this instance works entirely via its workflow actions. -
Configure the instance’s fields
Set the Target Element ID to the DOM ID of the element you want to bring into view, and the Parent Container ID to the DOM ID of the scrollable container. Optionally enter an Animation Duration (ms) for a smooth scroll, and a Vertical Offset (px) to fine‑tune the final position. -
Snapshot initial scroll positions
When you run Scroll to Element for the first time, the plugin automatically publishes your current scroll positions as Current Page Position and Current Parent Position. You don’t need to configure anything extra—these states update behind the scenes. -
Trigger the scroll
In any workflow, add the Scroll to Element workflow action. This will scroll your container to the target element (plus offset), using smooth animation if you set a duration. The action fires the Scroll to Element Complete workflow event trigger when finished. -
Chain follow‑up logic
Add a “When Scroll to Element Complete” workflow event trigger to run post‑scroll actions—such as highlighting the new section, loading additional data, or recording an analytics event. -
Return to the original position
To bring users back, create another workflow and add the Scroll Back workflow action. This instantly returns the container to the previously captured Current Parent Position and fires the Scroll Back Complete workflow event trigger. -
Optional cleanup
If you need to clear stored positions before a new scroll sequence, use the Clear Positions workflow action. This resets both Current Page Position and Current Parent Position to empty (null), giving you a fresh slate. -
Build richer UX flows
Combine these steps to create guided tours, error‑focus jumps, or promotion reveals. By leveraging the built‑in states and event triggers, you can orchestrate complex scroll‑driven interactions without any custom code.
Use Case Examples
-
Smooth Section Navigation for Content‑Heavy Pages
Use the Scroll to Element workflow action to guide readers directly to article sections or FAQs. Chain a Scroll to Element Complete workflow event trigger to highlight the new section or update a progress bar. -
Interactive Onboarding Tours
Drive users through a step‑by‑step tutorial by scrolling to each form field or feature demo. Capture each step’s position in Current Parent Position, then let the “Back” button run Scroll Back so users can revisit previous steps seamlessly. -
Scroll‑Triggered Analytics
Capture Current Page Position and Current Parent Position states whenever users scroll to key elements—like pricing tables or signup buttons—and send them to your analytics service. Analyze which sections drive the most engagement or conversions. -
In‑App Promotion Reveal
Automatically scroll to a promotional banner or upsell panel when users reach the end of free content. After scrolling, fire a Scroll to Element Complete workflow event trigger to display a special offer modal. -
Restore Scroll Position on Page Reload
Store Current Page Position in a custom state or database, then upon page revisit use Scroll to Element with that position as a target to return users to their last read spot—boosting retention and engagement. -
Lazy‑Load Dynamic Content
In a long feed or feed‑like interface, use Scroll to Element to bring newly loaded items into view after an AJAX‑style append. Then capture the view position to maintain user context as more data streams in. -
Gamified Progress Tracking
Reveal achievement badges or unlock rewards when users scroll to specific milestones in content (e.g., “Read 50% of this guide”). Chain the scroll action with conditional workflows to award points or badges. -
Mobile Menu Reveal & Hide
Scroll a hidden side menu into view when users tap an icon, then slide it back out using Scroll Back. Trigger your own workflows on each Scroll Back Complete event to restore UI focus. -
Conditional Form Focus
Jump to the first invalid form field after validation fails, then trigger a Scroll to Element Complete event to display an error tooltip. Let Scroll Back return users to their original scroll context if needed.
Performance‑Driven Monetization
Track which product sections users view most—by firing analytics in the Scroll to Element Complete workflow event trigger—then prioritize premium ad placements or in‑app purchase prompts exactly where engagement peaks.