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

[rishabdev2997]

Hi @limzykenneth ,

I hope you're doing well! I wanted to follow up on my previous message regarding the "Move to Top" button feature. Based on our discussions, I’ve outlined key considerations such as:

• The animation style (smooth scroll vs. instant jump).
• The approach for handling scroll position (using #top vs. JavaScript).
• Ensuring alignment with the existing design and using Tailwind CSS for styling.

Could you confirm if this aligns with your expectations? If so, I’ll proceed with the implementation accordingly. Let me know if there are any additional preferences or adjustments you'd like me to consider.

Looking forward to your feedback!

Best regards,
@rishabdev2997

[limzykenneth]

Hi @rishabdev2997, I see you have outlined options for implementing this feature but I'm still not sure what is it that is proposed and why? Eg. Are you planning to implement smooth scroll or instant jump and why?

[rishabdev2997]

Hi @limzykenneth,

Thanks for your response! I wanted to update you that I’ve already implemented the smooth scroll animation to the top in my PR #631 . I went with this approach as it provides a better user experience by making the transition feel natural rather than abrupt.

Let me know if you’d like any modifications or if you prefer an instant jump instead. Happy to make adjustments based on your feedback!

Looking forward to your thoughts.

Best regards,
@rishabdev2997

[limzykenneth]

I would prefer an instant jump without using JS if possible as having too much animation can be an accessibility issue and I would also like to limit use of JS on the website as much as possible. In your implementation, there is also use of inline JS which is also not desired, if we were to use JS at all.