AOSSIE-Org / AOSSIE-Org/SocialShareButton
[FEATURE]: Add Scroll-to-Top Button with Smooth Animation
- Ngôn ngữ chính
- TypeScript
- Star
- 25
- Fork
- 64
- Merge trung bình
- 2 ngày 11 giờ
- Pull request đã merge (30 ngày)
- 1
Mô tả
### 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
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.