AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Abierto
#240 3 comentarios 0 reacciones 0 asignados Ver en GitHub
enhancement
Lenguaje dominante
TypeScript
Estrellas
25
Forks
64
Merge medio
2 d 11 h
PR fusionados (30 d)
1

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.