cityofaustin / cityofaustin/techstack

🚧 Feature: back to top [mobile] ∙ dev criteria

Open
#4,953 0 comments 0 reactions 0 assignees View on GitHub
Future Feature Janis Alpha Team: Dev
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.