[FEATURE]: Add Scroll-to-Top Button with Smooth Animation

[zaibamachhaliya]

Feature and its Use Cases

Feature: Scroll-to-Top Button

What is the feature?

A floating action button (FAB) that appears when users scroll down the page. When clicked, it smoothly scrolls the page back to the top. This is a common UX pattern found on most modern websites.

How would users benefit from it?

1. Improved Navigation: Users don't need to manually scroll back up after reading long content
2. Better UX: Saves time and provides a convenient shortcut
3. Mobile Friendly: Especially useful on mobile devices where scrolling is more tedious
4. Accessibility: Helps users with mobility impairments navigate more easily

What scenarios would this feature address?

1. Long Articles/Blog Posts: Readers can quickly return to top after finishing
2. Product Pages: Users can navigate back to navigation/menu after scrolling
3. Documentation Pages: Quick return to table of contents
4. Mobile Devices: Easier navigation on small screens
5. Single Page Applications: Quick navigation without page refresh

How does it work technically?

1. A button is created in the DOM with fixed positioning
2. It's hidden initially (display: none)
3. When user scrolls past a threshold (e.g., 300px), button appears with fade animation
4. On click, window.scrollTo() with smooth behavior is triggered
5. Accessibility features: ARIA labels, keyboard support, focus management

Additional Context

┌─────────────────────────────────────┐
│ Website Header │
│ │
│ Content... │
│ │
│ Content... │
│ │
│ Content... │
│ │
│ ┌─────┐ │
│ │ ↑ │ ← Floating │
│ └─────┘ Button │
│ │
└─────────────────────────────────────┘

Design Specifications

• Position: Bottom-right corner (30px from bottom, 30px from right)
• Size: 50px × 50px circular button
• Color: Matches library's primary gradient (#667eea to #764ba2)
• Icon: Up arrow (↑)
• Animation: Fade in with slight upward motion
• Trigger: Appears after scrolling 300px

Proposed Configuration

new SocialShareButton({
  // ... existing options
  scrollToTop: {
    enabled: true,
    position: 'bottom-right',
    showAfter: 300,
    buttonColor: '#667eea',
    buttonHoverColor: '#764ba2',
  }
});

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates

[zaibamachhaliya]

Hi @kpj2006 , I would like to work on this issue, please assign it to me.

[RounakKumarAgarwal]

Hi ,I would like to work on this issue , could you assign it to me?

[zaibamachhaliya]

Hi @RounakKumarAgarwal , I am already working on this issue.