AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Offen
#240 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement
Vorherrschende Sprache
TypeScript
Sterne
25
Forks
64
Ø Merge
2 T. 11 Std.
Gemergte PRs (30 T.)
1

Beschreibung

### 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
```javascript
new SocialShareButton({
// ... existing options
scrollToTop: {
enabled: true,
position: 'bottom-right',
showAfter: 300,
buttonColor: '#667eea',
buttonHoverColor: '#764ba2',
}
});
```

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.