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.

Sign up for GitHub

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

Jump to bottom

feat: add Scroll to Top button #50

Merged
merged 14 commits into from
Aug 25, 2023
Merged

feat: add Scroll to Top button #50

merged 14 commits into from
Aug 25, 2023

Conversation

jrachelr
Copy link
Collaborator

PR Checklist

Overview

Previously if a search returned multiple pages of results the user needed to manually scroll to return to the search form.

These changes add a scroll to top button component to improve UI.

How ScrollButton works:

  • setState hook for [visible, setVisible] is set to false
  • document.body.addEventListener("scroll", toggleVisible, { passive: true }) listens for the scroll event and sets the passive option to true to improve performance.
  • toggleVisible function references document.body using the built in scrollTop property and updates state to visible after scrolling >100 pixels, rendering the button in the DOM
  • The scrollToTop function uses the built in browser method scrollTo to scroll to the top: 0 coordinate of document.body.
  • scrollToTop is called when the button is clicked by the user with a onClick event handler

jrachelr added 14 commits July 31, 2023 10:02
@jrachelr
feat/scroll-to-top: created component and added to page.tsx. not rend…
9e9b9cf 
…ering in browser yet
@jrachelr
feat/scroll-too-top: I am stuck🥳. either window object or scrollTo me…
97aaaad 
…thod is causing it to not work
@jrachelr
feat/scroll-to-top: stop pushing to main
2fac7f0
@jrachelr
feat/scroll-to-top: was not in ts, converting
cb0173c
@jrachelr
feat/scroll-to-top: got a button working, need to refactor
165e904
@jrachelr
feat/scroll-to-top: console logs are pulling the correct elements but…
73c3622 
… scrollTo still not working.
@jrachelr
feat/scroll-to-top: button working. removed Link and changed scrollTo…
04f98c1 
… to top of body
@jrachelr
feat/scroll-to-top: adding logic to only show button after scrolling,…
e64c7d2 
… scrollTop currently returning 0.
@jrachelr
feat/scroll-to-top: updated document.documentElement to document.body…
67bf6d3 
… and works as expected
@jrachelr
feat/scroll-to-top: adding styling. setting position to fixed not wor…
48f16f5 
…king as expected.
@jrachelr
feat/scroll-to-top: button working as expected and positioned correctly🥳
c876e64
@jrachelr
feat/scroll-to-top: added media query for small screens on button
e47b08a
@jrachelr
feat/scroll-to-top: adjusted scrollButton spacing on media query and …
135be20 
…tested for light/dark mode
@jrachelr
feat/scroll-to-top: comment clean up before PR
3dd511f
@vercel
Copy link

vercel bot commented Aug 25, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tidelift-me-up-site ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 25, 2023 6:12pm

@JoshuaKGoldberg JoshuaKGoldberg self-requested a review August 25, 2023 19:31
JoshuaKGoldberg
JoshuaKGoldberg requested changes Aug 25, 2023
View reviewed changes
Copy link
Owner

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we're talking right now so todo will post actual thoughts hello hi

src/components/ScrollButton.tsx Show resolved Hide resolved
src/components/ScrollButton.module.css Show resolved Hide resolved
src/components/ScrollButton.tsx Show resolved Hide resolved
@JoshuaKGoldberg JoshuaKGoldberg added the status: waiting for author Needs an action taken by the original poster label Aug 25, 2023
@JoshuaKGoldberg JoshuaKGoldberg self-requested a review August 25, 2023 19:31
@JoshuaKGoldberg JoshuaKGoldberg removed the status: waiting for author Needs an action taken by the original poster label Aug 25, 2023
JoshuaKGoldberg
JoshuaKGoldberg requested changes Aug 25, 2023
View reviewed changes
Copy link
Owner

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great, thanks! ✨ - it works, it looks nice, and it even has some snazzy horizontal sliding. Just requesting a couple UI fixups and some code things.

src/app/page.tsx Show resolved Hide resolved
src/components/ScrollButton.module.css Show resolved Hide resolved
src/components/ScrollButton.module.css Show resolved Hide resolved
src/components/ScrollButton.tsx Show resolved Hide resolved
src/components/ScrollButton.tsx Show resolved Hide resolved
src/app/page.tsx Show resolved Hide resolved
@JoshuaKGoldberg JoshuaKGoldberg added the status: waiting for author Needs an action taken by the original poster label Aug 25, 2023
@jrachelr jrachelr changed the title Feat/scroll to top +feat: add Scroll to Top button Aug 25, 2023
@jrachelr jrachelr changed the title +feat: add Scroll to Top button feat: add Scroll to Top button Aug 25, 2023
@JoshuaKGoldberg JoshuaKGoldberg removed the status: waiting for author Needs an action taken by the original poster label Aug 25, 2023
JoshuaKGoldberg
JoshuaKGoldberg approved these changes Aug 25, 2023
View reviewed changes
Copy link
Owner

@JoshuaKGoldberg JoshuaKGoldberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 this is great, thanks!

I'll post followup issues after. Feel free to get started on them if you want in the meantime, but no rush.

Really excited about this - thanks @jrachelr! 🚀

Will Ferrel saying 'awesome' in a grocery store and punching cereal

@JoshuaKGoldberg JoshuaKGoldberg merged commit 7b5b5aa into JoshuaKGoldberg:main Aug 25, 2023
@JoshuaKGoldberg
Copy link
Owner

@all-contributors please add @JoshuaKGoldberg for maintenance.

🤖 Beep boop! This comment was added automatically by all-contributors-auto-action.
Not all contributions can be detected from Git & GitHub alone. Please comment any missing contribution types this bot missed.
...and of course, thank you for contributing! 💙

@allcontributors
Copy link
Contributor

@JoshuaKGoldberg

I've updated the pull request to add @JoshuaKGoldberg! 🎉

I couldn't determine any contributions to add, did you specify any contributions?
Please make sure to use valid contribution names.

Repository owner deleted a comment from allcontributors bot Aug 27, 2023
@JoshuaKGoldberg
Copy link
Owner

@allcontributors add @jrachelr for feat

@allcontributors
Copy link
Contributor

@JoshuaKGoldberg

I couldn't determine any contributions to add, did you specify any contributions?
Please make sure to use valid contribution names.

@JoshuaKGoldberg
Copy link
Owner

@allcontributors add @jrachelr for code

@allcontributors allcontributors bot mentioned this pull request Aug 27, 2023
Merged
@allcontributors
Copy link
Contributor

@JoshuaKGoldberg

I've put up a pull request to add @jrachelr! 🎉

JoshuaKGoldberg pushed a commit that referenced this pull request Aug 27, 2023
@allcontributors
docs: add jrachelr as a contributor for code (#56)
9094572 
Adds @jrachelr as a contributor for code.

This was requested by JoshuaKGoldberg [in this
comment](#50 (comment))

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
@JoshuaKGoldberg
Copy link
Owner

@allcontributors add @jrachelr for design

@allcontributors allcontributors bot mentioned this pull request Aug 27, 2023
Merged
@allcontributors
Copy link
Contributor

@JoshuaKGoldberg

I've put up a pull request to add @jrachelr! 🎉

JoshuaKGoldberg pushed a commit that referenced this pull request Aug 27, 2023
@allcontributors
docs: add jrachelr as a contributor for design (#57)
8a0f1a4 
Adds @jrachelr as a contributor for design.

This was requested by JoshuaKGoldberg [in this
comment](#50 (comment))

---------

Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
This was referenced Aug 30, 2023
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JoshuaKGoldberg JoshuaKGoldberg JoshuaKGoldberg approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

🚀 Feature: Add a 'back to top' button for long search results
2 participants
@jrachelr @JoshuaKGoldberg