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 to improve page navigation #905

Closed
wants to merge 8 commits into from
Closed

feat: Add scroll-to-top button to improve page navigation #905

wants to merge 8 commits into from

Conversation

kasimlohar
Copy link

Add Scroll-to-Top Button Feature

Description

Added a scroll-to-top button that appears when users scroll down the page, providing an easy way to return to the top of the page with a single click. This enhancement improves navigation on long pages and overall user experience.

Changes Made

New Components

  • Created a new scroll-to-top button component with smooth scrolling behavior
  • Added responsive design and animations for better user interaction
  • Implemented accessibility features (ARIA labels, keyboard navigation)

Files Modified

  1. webpack/sass/main.scss

    • Imported new scroll-to-top component styles
    • Integrated with existing style system

  2. webpack/sass/components/_scroll-to-top.scss

    • Added new component styles
    • Implemented transitions and hover effects
    • Used existing color variables for consistency

  3. webpack/js/scroll-to-top.js

    • Created new module for scroll-to-top functionality
    • Added scroll position detection
    • Implemented smooth scrolling behavior

  4. webpack/js/main.js

    • Integrated scroll-to-top initialization
    • Added event listeners for scroll detection

  5. themes/vocabulary_theme/templates/layout.html

    • Added button HTML markup
    • Included SVG icon for the arrow
    • Added appropriate ARIA labels for accessibility

Features

  • Button appears when scrolling down 300px from top
  • Smooth scrolling animation when clicking the button
  • Responsive design works on all screen sizes
  • Hover effects for better user interaction
  • Accessible via keyboard navigation
  • Screen reader compatible

Testing Done

  • Tested across major browsers (Chrome, Firefox, Safari, Edge)
  • Verified responsive behavior on mobile and desktop
  • Checked accessibility using screen readers
  • Validated smooth scrolling functionality
  • Confirmed proper integration with existing styles

Screenshots

Intial_stage
mid_stage
final_stage

Accessibility

  • Added ARIA label for screen readers
  • Ensured keyboard navigation works
  • Maintained sufficient color contrast
  • Added hover/focus states

Related Issues

Closes #904

@kasimlohar kasimlohar requested review from a team as code owners January 21, 2025 18:40
@kasimlohar kasimlohar requested review from TimidRobot, possumbilities and dhruvkb and removed request for a team January 21, 2025 18:40
@TimidRobot TimidRobot added the ⛔️ status: discarded Will not be worked on label Jan 22, 2025
@TimidRobot
Copy link
Member

@kasim-lohar2 thank you for your time on this, however, closing with ⛔️ status: discarded Will not be worked on as this pull request (PR) was submitted on an issue still in triage (please see Contribution Guidelines — Creative Commons Open Source). Additionally it does not follow PR template/instructions.

@TimidRobot TimidRobot closed this Jan 22, 2025
@TimidRobot TimidRobot self-assigned this Jan 22, 2025
@kasimlohar
Copy link
Author

Hi @TimidRobot ,

Thank you for reviewing my pull request and for your feedback. I appreciate you pointing out that the issue was still in triage and that I missed following the PR template/instructions.

I’ll carefully go through the Contribution Guidelines and PR template to ensure my future contributions align with the project’s standards.

Thank you again for your guidance and for maintaining such a great project. I look forward to contributing more in the future!

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

@TimidRobot TimidRobot Awaiting requested review from TimidRobot TimidRobot is a code owner automatically assigned from creativecommons/technology

@possumbilities possumbilities Awaiting requested review from possumbilities possumbilities is a code owner automatically assigned from creativecommons/technology

@dhruvkb dhruvkb Awaiting requested review from dhruvkb dhruvkb is a code owner automatically assigned from creativecommons/ct-cc-open-source-core-committers

Assignees

@TimidRobot TimidRobot

Labels
⛔️ status: discarded Will not be worked on
Projects
TimidRobot
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feature] Adding a Scroll-to-Top button
2 participants
@kasimlohar @TimidRobot