feat: adding a move to top icon

[solanki505]

Increasing Access

this will reduce the time to scroll back at top

Most appropriate sub-area of p5.js?

Home

Feature request details

makes the site more user friendly

[rishabdev2997]

Hi @limzykenneth, @lmccart, @kjhollen

I'd like to discuss the implementation of the "Move to Top" button for the site. I’ve created a component for it and used SCSS for styling, but before submitting a new PR, I want to gather feedback to ensure it aligns with our overall design and approach. Here are a few points for discussion:

Feature Necessity — Do we think this button would add value to the user experience? If not, we can close the issue.
Design and Placement — The button is currently positioned in the bottom right corner. Should we consider any adjustments to its design or placement?
Consistency with Site Styling — I’ve used SCSS for styling. Please let me know if this approach aligns with the current best practices we follow.
Looking forward to your feedback and thoughts before moving forward.

Thanks!

[limzykenneth]

Just in terms of the styling method (not commenting on the necessity and design aspects at the moment), many of the styling that we use on the website uses TailwindJS and not necessarily SCSS. Tailwind can help reduce the overall code duplication in CSS so I would prefer to use it where possible, so this should be looked into.

[rishabdev2997]

Hi @limzykenneth, thank you for your feedback! I understand your point about preferring TailwindCSS for styling consistency across the project. Before I go ahead and refactor the implementation to use Tailwind, I wanted to clarify if it would be better to first discuss the necessity and design of this feature in more detail. Please let me know how you'd like to proceed, and I'm happy to make any adjustments based on the project’s needs. Thanks for guiding me through this!

[limzykenneth]

Yes, there need to be some discussion and research into the necessity and design. For example (not the only thing to determine), should go to top button be animating to the top or just jumps to it? Should it use a #top id or use JS to set scroll position. There are many ways to implement this and we need to determine which fits with the overall design of the website first.

[rishabdev2997]

Hi @limzykenneth thank you for clarifying! I understand now that we need to discuss the specific design and implementation details before proceeding. For example, as you mentioned, whether the button should animate smoothly to the top or just jump, and whether to use an #id or JavaScript for scrolling behavior. I agree it’s important to align this with the overall design approach of the website.
Could you please advise on how we should start this discussion? Should I open a new issue focused on these design and implementation considerations, or should we continue discussing this within the existing issue thread? I’m happy to contribute and make any changes based on the collective decision. Looking forward to your guidance!

[limzykenneth]

Using this issue is fine

[rishabdev2997]

Hi @limzykenneth ,

I hope you’re doing well! I wanted to check with you before proceeding further. Based on the discussions, we’ve established that there are multiple considerations for implementing the "Move to Top" button feature, such as:

• The animation style for the scroll (should it animate or just jump to the top?).
• The method for handling the scroll position (using #top or setting it via JS).
• Aligning the implementation with the existing design, particularly using Tailwind CSS.
• If these details are aligned with your expectations, would it be okay for me to start working on this implementation? I will ensure to use Tailwind CSS for styling and adhere to the design requirements.

Looking forward to your advice! Let me know if there’s anything else you’d like to clarify before I proceed.

Best regards,
@rishabdev2997