🐞[Bug]: Correct Color of 'Back-To-Top' Button According to Website Theme and Align Properly to Page Side

[AsmitaMishra24]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The 'Back-To-Top' button on our website currently has some issues with its color, alignment, and functionality. This needs to be addressed to ensure it matches the overall website theme, aligns correctly to the side of the page, and functions smoothly.

Current Problems:

1. Color Mismatch: The 'Back-To-Top' button does not match the website's theme colors.
2. Alignment Issue: The button is not properly aligned to the side of the page.
3. Smooth Functionality: The button's scroll-up functionality is not smooth, causing a jarring experience.

Expected behavior

1. Color: The 'Back-To-Top' button should use colors that match the website's theme. The exact colors should be derived from the CSS variables used for primary, secondary, or accent colors of the website.
2. Alignment: The button should be properly aligned to the side of the page, maintaining a consistent margin from the edge across different screen sizes and devices.
3. Smooth Scrolling: The button should enable a smooth scroll back to the top of the page, enhancing user experience.

Add ScreenShots

What browsers are you seeing the problem on?

No response

Record

• I have read the Contributing Guidelines
• I'm a GSSOC'24 contributor
• I have starred the repository

[github-actions]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.