You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add a floating "Back to Top" button that appears site-wide
across all pages of the Cara Fashion Store when the user
scrolls down, allowing them to instantly return to the top
of any page with a single click.
❓ Problem Statement
Currently there is no "Back to Top" button on any page of
the website. This has been verified across all routes:
/ (Homepage)
/shop.html
/product.html
/cart.html
/checkout.html
/wishlist.html
/profile.html
/order.html
/about.html
/contact.html
/blog.html
/help.html
The homepage in particular is extremely long — it contains
a hero section, features strip, featured products, new
arrivals, recently viewed, recommended section, promotional
banners, men's/women's collection banners, seasonal banners,
and a newsletter footer. Without a Back to Top button, users
must manually scroll all the way back up which is a poor
experience especially on mobile.
Note: Issue #26 references this for a specific page,
but the problem exists across the entire site on all routes.
💡 Proposed Solution
A fixed floating circular button at the bottom-right
corner of the screen (↑ arrow icon)
Button is hidden by default
Appears smoothly when user scrolls down more than 300px
Clicking it smoothly scrolls back to the top of the page
Disappears again when user is back at the top
Since the navbar is a shared component, the button
can be added once in navbar.html or components.js
and will automatically appear on all pages
🎯 Benefits
Improves navigation experience across all pages
especially long ones like homepage and shop
Particularly impactful on mobile where scrolling
long pages is tedious
Single implementation in the shared navbar/component
covers all pages at once — no need to add it
page by page
Lightweight — pure HTML + CSS + JS, no library needed
Industry-standard UX pattern present on virtually
every modern e-commerce website
📷 Screenshots
🌐 Additional Context
Files to modify: frontend/components/navbar.html, frontend/styles/components.css, frontend/scripts/components.js
Single implementation covers ALL pages automatically
since navbar is a shared component loaded everywhere
No backend changes required
No external libraries needed
Tested mentally across all routes — homepage, shop,
product, cart, checkout, wishlist, profile, order,
about, contact, blog, help
🚀 Feature Request
📌 Feature Description
Add a floating "Back to Top" button that appears site-wide
across all pages of the Cara Fashion Store when the user
scrolls down, allowing them to instantly return to the top
of any page with a single click.
❓ Problem Statement
Currently there is no "Back to Top" button on any page of
the website. This has been verified across all routes:
The homepage in particular is extremely long — it contains
a hero section, features strip, featured products, new
arrivals, recently viewed, recommended section, promotional
banners, men's/women's collection banners, seasonal banners,
and a newsletter footer. Without a Back to Top button, users
must manually scroll all the way back up which is a poor
experience especially on mobile.
Note: Issue #26 references this for a specific page,
but the problem exists across the entire site on all routes.
💡 Proposed Solution
corner of the screen (↑ arrow icon)
can be added once in
navbar.htmlorcomponents.jsand will automatically appear on all pages
🎯 Benefits
especially long ones like homepage and shop
long pages is tedious
covers all pages at once — no need to add it
page by page
every modern e-commerce website
📷 Screenshots
🌐 Additional Context
frontend/components/navbar.html,frontend/styles/components.css,frontend/scripts/components.jssince navbar is a shared component loaded everywhere
product, cart, checkout, wishlist, profile, order,
about, contact, blog, help
covers the entire site not just one page