feature: Scroll-to-top button only visible when user scroll certain level of the Pixel.

[AnkitLuhar]

Describe the feature

###Current Behavior:
The scroll-to-top button is always visible, even when the user has not scrolled down the page. This can be visually unappealing and can clutter the user interface.

###Proposed Improvement:
To enhance the user experience and the visual appeal of the page, the scroll-to-top button should only become visible when the user has scrolled down more than 400 pixels. When the user scrolls back up past this point, the button should become hidden again.

It should be implemented because

###Benefits:

1.Improved User Interface: By hiding the scroll-to-top button until it is needed, the user interface becomes cleaner and less cluttered.

2.Enhanced User Experience: The button will only appear when it is relevant, providing a more intuitive and less distracting experience for users.

3.Performance Optimization: Reducing unnecessary elements on the screen can help in slightly improving the rendering performance, especially on devices with limited resources.

###Implementation Details:

1.Event Listener for Scroll: Implement an event listener to monitor the scroll position of the page.

2.Conditional Visibility: Use a condition to check if the scroll position is greater than 400 pixels. If true, display the button; otherwise, hide it.

3.Smooth Transitions: Optionally, add smooth transition effects for the button's appearance and disappearance to provide a polished user experience.

Additional context

This enhancement aligns with modern web design practices by ensuring that elements are only present when they serve a purpose, thereby improving the overall user interaction with the website.

Would you like to work on this issue?

Yes

[github-actions]

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! Meanwhile you can show some love to this repo by starring it and following the maintainers : @PranavBarthwal , @surajvast1 & @harshit-sharmaaa 😊

[AnkitLuhar]

@PranavBarthwal ,@surajvast1, @harshit-sharmaaa , Assign this issue under the Gssoc'24.

[Sheshank-singh]

@AnkitLuhar i want to work upon the issue can you assign it to me under GSSOC