Added the scroll to top button

[ria447]

Pull Request

🔗 Related Issue

Closes #473

---

📝 Summary of Changes

I have added the scroll-to-top button

---

🏷️ Type of Change

• 🐛 Bug fix
• [Y ] ✨ New feature
• ♻️ Refactor
• 📝 Documentation update
• [Y ] 🎨 UI / Style change
• 🔧 Chore

---

✅ Checklist

• [ Y] No merge conflicts
• [ Y] Changes follow the project guidelines
• [ Y] Documentation updated (if applicable)
• [ Y] Related issue linked
• Changes tested locally (if applicable)

Summary by CodeRabbit

• New Features
  • Added a fixed “scroll to top” button in the bottom-right that appears after scrolling down (beyond a set threshold).
  • Clicking the button smoothly scrolls back to the top.
  • Added interactive styling (hover/active states and keyboard focus visibility) for improved usability.
• Bug Fixes
  • Improved the surrounding page-initialization flow so existing keyboard-shortcut setup remains correctly applied when the scroll button logic is added.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6a4780d1-f578-4f62-ae85-1232c10e319a

📥 Commits

Reviewing files that changed from the base of the PR and between 9a18b24 and 4147fd7.

📒 Files selected for processing (2)

• frontend/campaign-builder.html
• frontend/theme.css

✅ Files skipped from review due to trivial changes (1)

• frontend/campaign-builder.html

---

📝 Walkthrough

Walkthrough

Adds floating scroll-to-top buttons to the campaigns pages, with fixed circular styling, visibility toggling after 300px of scrolling, and smooth scrolling to the page top on click.

Changes

Scroll-to-top interaction

Layer / File(s)	Summary
Button markup, styling, and behavior frontend/campaigns.html, frontend/campaign-builder.html, frontend/theme.css, frontend/main.js	Adds accessible buttons, fixed bottom-right styling with hidden, hover, active, and focus states, scroll-based visibility toggling, and smooth scrolling to the top on click.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: frontend, type:feature, type:design

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: adding a scroll-to-top button.
Linked Issues check	✅ Passed	The PR adds the floating button, scroll threshold, and smooth-scroll behavior required by #473.
Out of Scope Changes check	✅ Passed	The changes stay focused on the scroll-to-top feature with only HTML, CSS, and JS additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/main.js (1)

613-615: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Throttle the scroll listener with requestAnimationFrame.

The scroll event fires dozens of times per second during scrolling. On the long list pages this feature targets, reading window.scrollY and mutating inline style on every event can cause noticeable jank. Wrapping the handler in a requestAnimationFrame guard is a well-known, low-cost pattern that eliminates redundant work.

⚡ Proposed fix: rAF-throttled scroll handler

-  window.addEventListener('scroll', () => {
-    scrollBtn.style.display = window.scrollY > 300 ? 'block' : 'none';
-  });
+  let ticking = false;
+  window.addEventListener('scroll', () => {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(() => {
+      scrollBtn.style.display = window.scrollY > 300 ? 'block' : 'none';
+      ticking = false;
+    });
+  });

🤖 Prompt for 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.

In `@frontend/main.js` around lines 613 - 615, Throttle the scroll listener around
the scrollBtn visibility update using a requestAnimationFrame guard: schedule at
most one frame while scrolling, read window.scrollY and update
scrollBtn.style.display inside that frame, then clear the guard so the next
scroll event can schedule another frame.

🤖 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 `@frontend/theme.css`:
- Around line 1309-1321: Update the .btn-scroll-top styles to define a visible
background-color, contrasting text color, and box-shadow. Add :hover and
:focus-visible states with clear visual feedback, ensuring keyboard users
receive a visible focus indicator while preserving the existing positioning and
sizing.

---

Nitpick comments:
In `@frontend/main.js`:
- Around line 613-615: Throttle the scroll listener around the scrollBtn
visibility update using a requestAnimationFrame guard: schedule at most one
frame while scrolling, read window.scrollY and update scrollBtn.style.display
inside that frame, then clear the guard so the next scroll event can schedule
another frame.

🪄 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 Plus

Run ID: f8c39cae-8d86-401a-8bc8-bd8bc9786ebd

📥 Commits

Reviewing files that changed from the base of the PR and between 4a33158 and 9a18b24.

📒 Files selected for processing (3)

• frontend/campaigns.html
• frontend/main.js
• frontend/theme.css