feat: add Back to Top button for better navigation on long pages

[Vaishnavi22Thakur]

🚀 Pull Request Description

Fixes #219

🛠️ Type of Change

• 🐛 Bug fix
• ✨ New feature
• 💥 Breaking change
• 📝 Documentation update
• 🎨 UI/UX improvement (Frontend only)
• ⚙️ Refactor / Chore

🧪 Testing & Validation

Backend Verification:

• Not applicable for this change

Frontend Verification:

• Verified the UI changes on different screen sizes (Responsive)
• Checked for any console errors in the browser dev tools

Note: Console shows network errors for backend connection (localhost:1234) but these are pre-existing errors unrelated to this change.

📸 Screenshots / Recordings

Before	After

✅ Checklist

• My code follows the code style of this project
• I have performed a self-review of my code
• My changes generate no new warnings or errors

📝 Changes Made

• Created new BackToTop.jsx component in apps/web-dashboard/src/components/Layout/
• Added <BackToTop /> to MainLayout.jsx for dashboard pages
• Added <BackToTop /> to LandingPage/index.jsx for the landing page
• Button appears after scrolling 300px down
• Smooth scroll back to top on click
• Matches site's dark theme with teal accent color

Summary by CodeRabbit

• New Features
  • Added a back-to-top button to the web dashboard and landing page. The circular, fixed bottom-right button appears after scrolling past a threshold and hides near the top of the page. It includes a hover scale animation and, when clicked, smoothly scrolls the page back to the top.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6f10a63a-d9f2-4aea-aa4b-89d842cbfda5

📥 Commits

Reviewing files that changed from the base of the PR and between 7391bd4 and 75f4dc0.

📒 Files selected for processing (1)

• apps/web-dashboard/src/components/Layout/BackToTop.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web-dashboard/src/components/Layout/BackToTop.jsx

---

📝 Walkthrough

Walkthrough

A new BackToTop React component is added that detects when the page scrolls past 300px and displays a fixed button that smoothly scrolls the window to the top. The component is then integrated into both MainLayout and LandingPage to provide consistent back-to-top navigation across the application.

Changes

Back to Top Navigation Feature

Layer / File(s)	Summary
BackToTop component implementation apps/web-dashboard/src/components/Layout/BackToTop.jsx	Introduces the new BackToTop component with scroll-event detection via useEffect, state-based visibility toggling at 300px scroll threshold, fixed-position circular button rendering, and smooth window scroll-to-top on click with proper event-listener cleanup.
Integration into MainLayout and LandingPage apps/web-dashboard/src/components/Layout/MainLayout.jsx, apps/web-dashboard/src/pages/LandingPage/index.jsx	BackToTop is imported and rendered in both MainLayout and LandingPage to display the back-to-top button in the application's main content areas.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

GSSOC'26, level:beginner, type:design, gssoc:approved, mentor:yash-pouranik

Suggested reviewers

• yash-pouranik

Poem

🐰 I hopped on code with tiny feet,
A button born to make scrolls fleet.
Past three hundred pixels, there it gleams,
A gentle click — back to the dreams.
Hop, scroll, and rise with joyful beams.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding a Back to Top button for improved navigation on long pages, which matches the changeset perfectly.
Linked Issues check	✅ Passed	The PR implementation fully satisfies issue #219 requirements: button appears after 300px scroll, smoothly scrolls to top on click, disappears when at top, uses floating bottom-right positioning, and includes accessibility attributes.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #219: BackToTop component creation and integration into MainLayout and LandingPage with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web-dashboard/src/components/Layout/BackToTop.jsx`:
- Around line 27-30: The icon-only button rendered in BackToTop.jsx (the button
with onClick={handleClick} and content "↑") lacks an explicit accessible name;
add aria-label="Back to Top" to that button element (and the second similar
button instance around line 49) so assistive technologies receive a reliable
name; locate the button elements that use handleClick and add the aria-label
attribute without changing visual text or behavior.
- Around line 4-16: The effect currently registers handleScroll but never runs
it on mount, so BackToTop can remain hidden if the page loads with
window.scrollY > 300; after adding the scroll listener in the useEffect, call
the existing handleScroll() once to initialize visibility (i.e., invoke
handleScroll right after window.addEventListener('scroll', handleScroll)) so
setIsVisible is set correctly on mount; keep the existing cleanup that removes
the listener.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c41caf8f-3d3d-41c6-9082-3e429e518c75

📥 Commits

Reviewing files that changed from the base of the PR and between 6ebd300 and 7391bd4.

📒 Files selected for processing (3)

• apps/web-dashboard/src/components/Layout/BackToTop.jsx
• apps/web-dashboard/src/components/Layout/MainLayout.jsx
• apps/web-dashboard/src/pages/LandingPage/index.jsx

[yash-pouranik]

BRo @coderabbitai
please check

• feat implemented nicely?
• code quality?
• files placed?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
echo "=== BackToTop.jsx ==="
cat apps/web-dashboard/src/components/Layout/BackToTop.jsx

echo ""
echo "=== MainLayout.jsx ==="
cat apps/web-dashboard/src/components/Layout/MainLayout.jsx

echo ""
echo "=== LandingPage/index.jsx ==="
cat apps/web-dashboard/src/pages/LandingPage/index.jsx

echo ""
echo "=== Layout folder structure ==="
tree apps/web-dashboard/src/components/Layout/ 2>/dev/null || ls -la apps/web-dashboard/src/components/Layout/

Length of output: 58232

---

---

PR description image 1 (production at urbackend.bitbros.in): Shows the dark landing page "Build Anything." with three use-case cards — button not visible because the page hasn't been scrolled, which is correct expected behavior.

PR description image 2 (localhost:5173): Shows the dev server with the cyan/teal circular back-to-top button visibly rendered in the bottom-right corner with an upward arrow — feature working correctly.

---

@yash-pouranik Here's the full breakdown:

---

✅ Feature — Implemented Correctly

All requirements from issue #219 are met:

Requirement	Status
Appears after 300px scroll	✅
Smooth scroll to top on click	✅
Disappears when at the top	✅
Fixed position, bottom-right	✅
Teal accent matches site theme	✅
aria-label + title for accessibility	✅
Cleanup of scroll listener on unmount	✅

---

✅ File Placement — Correct

BackToTop.jsx lives in apps/web-dashboard/src/components/Layout/ alongside Footer.jsx, Header.jsx, Sidebar.jsx etc. — exactly the right place. Import paths in both MainLayout.jsx and LandingPage/index.jsx are correct.

---

⚠️ Code Quality — Good, with a few improvements

1. Scroll handler can be simplified (minor)

// Current (verbose)
const handleScroll = () => {
    if (window.scrollY > 300) {
        setIsVisible(true);
    } else {
        setIsVisible(false);
    }
};

// Cleaner
const handleScroll = () => {
    setIsVisible(window.scrollY > 300);
};

2. No debounce/throttle on scroll handler (performance)

Scroll events fire on every pixel of movement — wrapping with a simple throttle is standard practice:

import { useState, useEffect, useCallback } from 'react';

// inside useEffect:
let ticking = false;
const handleScroll = () => {
    if (!ticking) {
        window.requestAnimationFrame(() => {
            setIsVisible(window.scrollY > 300);
            ticking = false;
        });
        ticking = true;
    }
};

3. Use Lucide ArrowUp instead of ↑ (consistency)

The entire codebase — including LandingPage/index.jsx — uses lucide-react icons. The Unicode character works but is inconsistent:

import { ArrowUp } from 'lucide-react';

// in the button JSX:
<ArrowUp size={20} strokeWidth={2.5} />

4. No hover effect (UX polish)

All styles are inline, so CSS :hover doesn't apply. You'd need to add a hover state or move to a CSS class:

// Option: add a tiny state
const [isHovered, setIsHovered] = useState(false);
// ...
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{
    // ...existing styles
    transform: isHovered ? 'scale(1.1)' : 'scale(1)',
    transition: 'transform 0.2s ease',
}}

5. Two scroll listeners on LandingPage (minor, acceptable)

LandingPage/index.jsx already has its own scroll listener (for the nav hide/show logic). BackToTop adds a second one. This is fine functionally, but worth knowing — they're independent and don't interfere with each other.

---

Summary

Check	Result
Feature works as per issue #219	✅
File placed correctly	✅
Code structure	✅ Clean
Scroll performance	⚠️ No throttle
Icon consistency (Lucide)	⚠️ Uses Unicode ↑
Hover feedback	⚠️ Missing

Overall solid work — the core feature is well done. The three ⚠️ items above are polish-level improvements, not blockers.

[yash-pouranik]

please fix then will merge
@Vaishnavi22Thakur

[yash-pouranik]

@Vaishnavi22Thakur ?????/

[coderabbitai]

Actionable comments posted: 0

[Vaishnavi22Thakur]

@yash-pouranik Fixed all 3 CodeRabbit suggestions:

• Added requestAnimationFrame throttle on scroll
• Replaced Unicode ↑ with Lucide ArrowUp icon
• Added hover scale effect
  Ready for review!

[yash-pouranik]

Thank you for the PR @Vaishnavi22Thakur
Hope to see more contribs from u
also please leave a star at repo.