cityofaustin / cityofaustin/techstack
🚧 Feature: back to top [mobile] ∙ dev criteria
- Dominant language
- No language data
- Stars
- 11
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
# User story
### As a resident, I want to be able to get back to the top of a page quickly, so that I don't get lost or have to scroll a lot to get back to the top of a page.
## Criteria
This is a mobile only feature for now.
Original design issue: https://github.com/cityofaustin/techstack/issues/4391
Criteria collection: https://share.goabstract.com/98a22bc6-926a-4d97-99ca-047a7ae598ba
Prototype showing interaction: https://xd.adobe.com/view/2c0a0912-5b61-465b-af99-358352c1a1c3-7959/
- [ ] Once the user has scrolled beyond 4 screens [let's use 667px as a general ballpark for a single screen height * 4 = 2,668px], this button should fade in. I realize that the screen height is relative to the device, so I'm not sure if there's an elegant way to take the height of the device and calculate that for the interaction.
- [ ] Once visible, the button should float, and remain sticky in its position (like a floating action button)
- [ ] To avoid unwanted obstruction of important interface elements (like button, accordions, and pagination) near the footer, let's hide this button at the end of the body content section, and before the footer navigation component.
**Button**
- [ ] Padding:` 8px`
- [ ] Border-radius: `4px`
- [ ] Background color: `#FFF5C3` or USWDS `yellow-5v`
- [ ] Leading `arrow_upward` icon color: `#DDAA26` or USWDS `yellow-30v`
- [ ] Font-size: `14px`
- [ ] Font-color: `#786117` or USWDS `yellow-60v`
**Animation**
- [ ] once the user clicks on the button, the screen should scroll back to the top
- [ ] scroll-behavior: smooth
- [ ] easing: in-out
- [ ] duration: 0.6s (this is a best guess, but we may need to tweak once we see it in code)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.