Added scroll-to-top button feature on home page

[Sanghmitra12]

Implemented scroll-to-top button on home page for better user navigation experience.

Summary by CodeRabbit

• New Features
  • Added a "Back to Top" button that appears when scrolling and smoothly returns users to the top of the page.
• Bug Fixes
  • Addressed an issue where two independent Back to Top instances could appear simultaneously, causing duplicate buttons and behavior.

[Sanghmitra12]

Added scroll-to-top button feature successfully. Please review my PR.

[coderabbitai]

Walkthrough

A Scroll to Top feature is added to the homepage: a Back to Top button appears after scrolling past a threshold and smoothly scrolls the page to the top when clicked. The button, its styles, and the script are present in two duplicated locations within the template, creating two independent instances.

Changes

Cohort / File(s)	Summary
Homepage Scroll to Top Feature website/templates/home.html	Adds a fixed Bottom-Right "Back to Top" button, scroll event logic to toggle visibility past a threshold, smooth scroll-to-top click handler, styling for the button, and duplicates the entire block (markup + script) in two locations resulting in two independent instances.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Page as Home Page
    participant Scroll as Scroll Event
    participant Button as Back to Top Button

    User->>Page: Scrolls down
    Page->>Scroll: Window scroll event
    Scroll->>Button: Evaluate scrollY vs threshold
    alt scrollY > threshold
        Button->>Button: set visible (show)
    else
        Button->>Button: set hidden (hide)
    end

    User->>Button: Click
    Button->>Page: window.scrollTo({ top: 0, behavior: "smooth" })

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Review the duplicated Back to Top block in website/templates/home.html for consolidation.
• Verify both instances behave identically and that the scroll threshold and accessibility (focus/aria) are appropriate.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main change: adding a scroll-to-top button feature to the homepage, which aligns with the raw summary and PR objectives.
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
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between f50ad91 and 9ee8ea5.

📒 Files selected for processing (1)

• website/templates/home.html (2 hunks)

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

• website/templates/home.html

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Run Tests
• GitHub Check: docker-test

---

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

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 07baeba and f50ad91.

📒 Files selected for processing (1)

• website/templates/home.html (2 hunks)

🔇 Additional comments (1)

website/templates/home.html (1)

1155-1157: The duplication claim is incorrect; only one backToTop button instance exists in the entire template.

The comprehensive search confirms exactly one button with id="backToTop" at line 1175, with its associated JavaScript handlers at lines 1182 and 1190. No duplicate implementations or alternative naming patterns were found. The AI summary's claim of duplication is factually inconsistent with the actual codebase.

Likely an incorrect or invalid review comment.

[gojo-satorou-v7]

@Sanghmitra12 This does not fix the issues #4730 , you have to fix the embedded code.
you have instead added a scroll to top button feature.

[Sanghmitra12]

Hi @gojo-satorou-v7,
Thank you for the feedback! 🙏
You’re absolutely right — this PR doesn’t fix issue #4730 (YouTube embed issue).
I actually implemented a small enhancement — a “Scroll-to-Top” button on the home page to improve user navigation.

This was my first open-source contribution, and I added this feature mainly to understand the complete contribution process and workflow better. 😊
If needed, I can remove the “Fixes #4730” reference and create a new issue for this enhancement.
Please let me know your suggestion. 🙌

[gojo-satorou-v7]

Hello @Sanghmitra12 please go through the issue before opening a PR and understand the underlying code causing the issue. In case you want to add new features in the project please ask DonnieBLT on the slack channel first.

[Sanghmitra12]

Hi @gojo-satorou-v7,
Thank you for the guidance! 🙏
Yes, I understand — I’ll make sure to go through the issue details carefully and understand the root cause before opening any PR next time.
This was actually my first open-source contribution, so I added a small feature mainly to get familiar with the workflow and contribution process. 😊
From now on, I’ll discuss new features or ideas with @DonnieBLT on the Slack channel before creating a PR.

Thanks again for your help and feedback! 🙌