Workspace test: Add 'Back to Top' button across all pages #275
Conversation
✅ Deploy Preview for opensauced-landing ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
I am actually going to close this. Just wanted to test Copilot Workspaces. I don't think this is needed on every page, just blog posts. |
| }; | ||
| }, []); | ||
|
|
||
| const scrollToTop = () => { |
There was a problem hiding this comment.
I know you're closing this, but all you need instead of a button and useEffect etc. is a link. There is a native #top anchor.
Back to top and you can enable smooth scrolling to make it work SMOOOOTHH.
Replaces the 'Back to Top' button with a link and removes scroll handling logic in PageLayout component. - Removes `useState`, `useEffect`, and the `scrollToTop` function, simplifying the component by eliminating scroll event listeners and state management for showing the button. - Introduces a direct link to `#top` using an anchor tag, enabling native browser handling for smooth scrolling back to the top of the page without custom JavaScript logic. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/open-sauced/landing-page/pull/275?shareId=0b9298fa-ea07-40a3-850c-cb8a980be302).
|
Replaces the 'Back to Top' button with a link and removes scroll handling logic in PageLayout component.
For more details, open the Copilot Workspace session. |
|
So I was surprise how close this got to being successful in a one shot prompt. I guess I am mostly just testing out Copliot Workspaces, but after copying @nickytonline's suggestion wholesell into the prompt and getting this commit bab3c96, makes me want to move this PR forward. |
|
Implements CSS-only visibility control for the "Back to Top" button based on page scroll.
For more details, open the Copilot Workspace session. |
Implements CSS-only visibility control for the "Back to Top" button based on page scroll. - Adds an `id` attribute to the main container in `PageLayout.tsx` to target it for the CSS scroll effect. - Modifies the "Back to Top" button's class to include a CSS class for scroll visibility control. - Updates `globals.css` with rules to hide the "Back to Top" button by default and to animate its visibility based on page scroll using `@keyframes` and the `:target` pseudo-class. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/open-sauced/landing-page/pull/275?shareId=043f35c1-8619-450d-98b0-210ddbf55190).
|
Closing for now. I don't think this is priority and there is still some clean up needed to make this work in CSS. |
Related to #272
Implements a 'Back to Top' button in the
PageLayoutcomponent to enhance user navigation across all pages.scrollToTopfunction that smoothly scrolls the user back to the top of the page when the button is clicked.For more details, open the Copilot Workspace session.