Back-to-top Button
Buttons & Interaction Back Intermediate Nice to TryHands-on
Interactive Sandbox
Try this
- Open page
- Interact control
- Read result
Assert this
- Visible elements
- Text matches
- Button state toggles
Buttons / Utility
Back-to-top Button
Appears after scroll, smooth-scrolls to top, and logs scroll position.
Scroll down to reveal the floating button.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus, nulla nec viverra consequat, eros nunc porta lorem, a malesuada nulla metus et ipsum.
Vivamus sed erat ut urna sagittis volutpat. Integer efficitur nisl ac ex fermentum, sit amet feugiat leo feugiat.
Morbi ultricies, ligula ut pretium porttitor, urna arcu tempor leo, a suscipit ipsum nisl at lacus.
Quisque eget est justo. Phasellus quis metus eget arcu consectetur bibendum.
Sed id urna vel lacus fringilla consequat. Praesent venenatis arcu sit amet justo blandit, eget egestas nunc convallis.
Aliquam erat volutpat. Sed quis nisi a justo dapibus lacinia.
Donec vitae diam ac augue faucibus iaculis nec eu mi.
Scroll further to keep testing...
End of the scroll area content.
Learning & behavior
User flow
- Open page
- Interact control
- Read result
Learning objectives
- Pick solid locators
- Time waits
- Assert state
Suggested assertions
- Visible elements
- Text matches
- Button state toggles
Selector tips
Good
- [data-test-id='back-to-top-button-primary']
- [data-test-id='back-to-top-button-secondary']
- [data-test-id='back-to-top-button-action']
- [aria-label='Back-to-top Button']
- getByRole('button', { name: 'Back' })
Fallback
- section.back-to-top-button-container :nth-of-type(1)
- .card.back_to_top_button button:nth-of-type(1)
- form.back-to-top-button-form .field-group:nth-child(1)
Avoid
- .mt-4.mb-2.flex.items-center > input:nth-child(1)
- .css-1a2b3c4
- div[class*='temp-'][class*='hover']
Notes
- Some parts delay render
- Icon buttons need aria-label
- Layout classes may shift