Overview
How might we design scroll to bottom so people can trust and act on AI output?
When this pattern fits
- Essential for all chat-based AI interfaces, messaging applications, and real-time collaboration tools where users need to stay aware of new messages while reviewing history.
When to skip or lighten it
- Single-screen tools with no scrollable transcript.
- Paginated histories that are not live-updating.
- When auto-stick-to-bottom would fight intentional review (offer the jump control instead of forcing scroll).
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Forcing scroll to bottom on every token while the user is reading up.
No indicator that new messages arrived above the fold.
Jump buttons that skip over unread turns without marking them.
Covering the composer with the jump control.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | Jump-to-latest while streaming if scrolled away. |
| Discord | New messages bar to return to live chat. |
| Slack | New message indicators and jump controls. |
| Microsoft Teams | Unread and jump-to-bottom patterns in threads. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Scroll to Bottom" AI interface design pattern.
Pattern Definition:Frequently asked questions
When should a chat auto-stick to bottom?
Only while the user is already at the bottom. If they scroll up, pause sticking and show a jump control.
What should the jump control show?
“New messages” or a count, not only a chevron. Optional preview of the latest line helps.
How does this interact with streaming?
Keep streaming in place off-screen; do not yank the viewport. Let users jump when ready.
Mobile specifics?
Place the control above the composer with enough tap target, and avoid fighting the on-screen keyboard.