Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add scroll to top button #3667

Merged
merged 5 commits into from
Dec 1, 2023
Merged

Add scroll to top button #3667

merged 5 commits into from
Dec 1, 2023

Conversation

theskumar
Copy link
Member

@theskumar theskumar commented Nov 27, 2023

Adds a scroll to top button to all the pages, it shows only if the user scroll past a decent screen size. It's put on the center top so that it's easily accessible.

Edit: Show only when the user is scrolling towards the top.

Screenshot 2023-11-27 at 5  42 39@2x

closes #3642

@theskumar theskumar self-assigned this Nov 27, 2023
@frjo frjo added Type: Enhancement This is an improvement of an existing thing (not a new thing, which would be a feature). Status: Needs testing Tickets that need testing/qa Type: Patch Mini change, used in release drafter labels Nov 27, 2023
@frjo
Copy link
Contributor

frjo commented Nov 27, 2023

Works well.

I prefer the back button near the bottom instead the top of the window. But this is likely a personal preference and might depend on how big your screen is.

@theskumar
Copy link
Member Author

theskumar commented Nov 27, 2023

Thanks for approving. I used this pattern from mkdocs-material. While the button on the right bottom is quite common, there is are couple reason for not placing it there.

  1. While you scroll down, your focus in at the bottom, it cutters that space.
  2. We have a sidebar with quite a lot of buttons, the right bottom will look quite busy. It will also overlap with other buttons.
  3. While scrolling up, the user attention is at the top area, and often forgets to pay attention to the bottom right.
  4. Another thing present on the mkdocs-material, is that it doesn't show the button while you are scrolling down, it shows only when you scrolling in upward direction. While is I find it nice, but didn't implement it here so it's more visible to users + slight simple code/performance gain to track which direction user is scrolling.

@theskumar
Copy link
Member Author

Updated so it's visible while scrolling up, also adjusted a bit of styling and animation. Let me know if you would prefer this over always visible. After implementing I tend to like this version better. Thoughts?

ee3c985

@wes-otf
Copy link
Contributor

wes-otf commented Nov 27, 2023

@theskumar I'll be checking this out in the next hour or so. Looks like a great addition!

@frjo
Copy link
Contributor

frjo commented Nov 27, 2023

Latest version on test in a moment.

@wes-otf
Copy link
Contributor

wes-otf commented Nov 27, 2023

All looked and worked very good!

Thanks @wes-otf

Co-authored-by: Wes Appler <145372368+wes-otf@users.noreply.github.com>
@wes-otf wes-otf added Status: Tested - approved for live ✅ and removed Status: Needs testing Tickets that need testing/qa labels Dec 1, 2023
@frjo frjo merged commit 3088632 into main Dec 1, 2023
10 checks passed
@theskumar theskumar deleted the feature/scroll-to-top branch December 3, 2023 04:56
wes-otf added a commit that referenced this pull request May 7, 2024
Adds a scroll to top button to all the pages, it shows only if the user
scroll past a decent screen size. It's put on the center top so that
it's easily accessible.

**Edit:** Show only when the user is scrolling towards the top.

closes #3642

---------

Co-authored-by: Wes Appler <145372368+wes-otf@users.noreply.github.com>
wes-otf added a commit that referenced this pull request May 8, 2024
Adds a scroll to top button to all the pages, it shows only if the user
scroll past a decent screen size. It's put on the center top so that
it's easily accessible.

**Edit:** Show only when the user is scrolling towards the top.

closes #3642

---------

Co-authored-by: Wes Appler <145372368+wes-otf@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Tested - approved for live ✅ Type: Enhancement This is an improvement of an existing thing (not a new thing, which would be a feature). Type: Patch Mini change, used in release drafter
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feature: add 'scroll to top' button
3 participants