Skip to content

Improve scroll-to-top button styling and behavior#3634

Open
ankitkr104 wants to merge 2 commits intogithub:mainfrom
ankitkr104:feature/scroll-to-top-button-refresh
Open

Improve scroll-to-top button styling and behavior#3634
ankitkr104 wants to merge 2 commits intogithub:mainfrom
ankitkr104:feature/scroll-to-top-button-refresh

Conversation

@ankitkr104
Copy link
Copy Markdown

@ankitkr104 ankitkr104 commented Apr 10, 2026

Summary

This PR improves the scroll-to-top button so it is cleaner, more accessible, and visually aligned with the site's white/gray theme.

Changes made

  • Replaced text-based button content with an inline SVG arrow icon.
  • Converted the button shape from rectangular to circular.
  • Updated button styling to a white/gray theme:
    • white background
    • subtle gray border
    • gray icon color
    • subtle shadow
  • Reduced button size for a less intrusive footprint.
  • Increased arrow height to improve visibility.
  • Improved hover state styling for clearer affordance.
  • Updated scroll behavior JS so the button displays using flex (keeps icon centered consistently).
image
  • Have you followed the contributing guidelines?
  • Have you explained what your changes do, and why they add value to the Guides?

Please note: we will close your PR without comment if you do not check the boxes above and provide ALL requested information.


Copilot AI review requested due to automatic review settings April 10, 2026 06:19
@ankitkr104 ankitkr104 requested a review from a team as a code owner April 10, 2026 06:19
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR updates the “scroll to top” button to better match the site’s white/gray theme and improve its UI consistency by switching to an icon-based, circular button and aligning the JS behavior with the new layout needs.

Changes:

  • Updated the scroll-to-top button markup to use an inline SVG arrow icon with improved accessible labeling.
  • Refreshed button styling (circular shape, white/gray palette, hover affordance, centered icon).
  • Adjusted scroll handler to show the button using display: flex for consistent centering.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
assets/js/button.js Shows/hides the button on scroll, updated to use display: flex when visible.
assets/css/button.scss Restyles the button to a circular white/gray design and sizes the SVG icon.
_includes/footer.html Replaces text label with an inline SVG icon and adds aria-label.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants