AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

未关闭
#240 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
enhancement
主要语言
TypeScript
星标
25
派生
64
平均合并
2 天 11 小时
30 天内合并 PR
1

描述

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

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。