# 调试指南 - Hash锚点问题

## 问题：输入 `anycall.online#contact` 被重定向

### 原因分析

当你在浏览器地址栏输入 `anycall.online#contact` 时：

1. **浏览器解析**：
   - 浏览器会将其解析为：`http://anycall.online#contact`
   - 注意：**缺少路径部分的 `/`**

2. **服务器请求**：
   - 浏览器发送请求到服务器时，**hash片段不会被发送**
   - 服务器只收到：`GET http://anycall.online`
   - Hash部分 `#contact` 保留在浏览器端

3. **可能的问题**：
   - 如果服务器配置了 `www` 重定向，会重定向到 `www.anycall.online`
   - 重定向时，hash片段可能丢失

### 解决方案

#### 方案1：使用正确的URL格式（推荐）

在浏览器地址栏输入时，请使用：
```
www.anycall.online/#contact
```
或
```
https://www.anycall.online/#contact
```

#### 方案2：配置服务器保留Hash

确保你的托管服务商（如Vercel, Netlify）配置了：

**Vercel:**
```json
{
  "redirects": [
    {
      "source": "/:path((?!www\\.)?.*)",
      "has": [
        {
          "type": "host",
          "value": "anycall.online"
        }
      ],
      "destination": "https://www.anycall.online/:path",
      "permanent": true
    }
  ]
}
```

**Netlify (_redirects):**
```
http://anycall.online/*  https://www.anycall.online/:splat  301!
```

#### 方案3：使用JavaScript检测和修复

项目已经在 `RouterContext.tsx` 中添加了检测逻辑：
```typescript
useEffect(() => {
  const hash = window.location.hash;
  const pathname = window.location.pathname;
  
  console.log('Initial URL check:', {
    href: window.location.href,
    pathname: pathname,
    hash: hash
  });
  
  if (pathname === '' || pathname === null) {
    const newUrl = '/' + hash;
    window.history.replaceState({ page: 'home' }, '', newUrl);
  }
}, []);
```

## 测试步骤

### 1. 检查URL解析

打开浏览器控制台，输入：
```javascript
console.log({
  href: window.location.href,
  origin: window.location.origin,
  pathname: window.location.pathname,
  hash: window.location.hash,
  search: window.location.search
});
```

### 2. 测试不同的URL格式

分别在地址栏输入以下URL并观察结果：

| 输入的URL | 期望结果 | 实际路径 | Hash保留 |
|----------|---------|---------|---------|
| `anycall.online#contact` | 可能重定向 | `/` | ❌ 可能丢失 |
| `anycall.online/#contact` | 正常 | `/` | ✅ 保留 |
| `www.anycall.online/#contact` | 正常 | `/` | ✅ 保留 |
| `https://www.anycall.online/#contact` | 正常 | `/` | ✅ 保留 |

### 3. 检查元素ID

在浏览器控制台，检查目标元素是否存在：
```javascript
console.log('Contact element:', document.getElementById('contact'));
console.log('FAQ element:', document.getElementById('faq'));
console.log('Features element:', document.getElementById('features'));
```

### 4. 手动触发滚动

如果自动滚动不工作，在控制台手动测试：
```javascript
const element = document.getElementById('contact');
if (element) {
  element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  console.log('Scrolled to contact');
} else {
  console.log('Contact element not found');
}
```

## 常见问题

### Q1: 为什么 `anycall.online#contact` 会丢失hash？

**A:** 因为服务器可能配置了重定向规则（如强制www或HTTPS），重定向时浏览器可能不会保留hash片段。

### Q2: 如何确保hash总是被保留？

**A:** 
1. 始终使用完整的URL格式，包括协议和路径
2. 配置服务器的重定向规则正确处理hash
3. 使用客户端JavaScript修复（已在项目中实现）

### Q3: 为什么有时候滚动不到正确位置？

**A:** 可能的原因：
1. 页面还在加载中，目标元素尚未渲染
2. 图片加载导致页面高度变化
3. CSS动画影响

**解决方案：**
项目已实现：
- 重试机制（最多10次）
- 等待window.load事件
- 多个延迟尝试（800ms, 1200ms）

## 浏览器兼容性

| 浏览器 | 版本 | Hash支持 | 备注 |
|-------|------|---------|------|
| Chrome | 90+ | ✅ | 完全支持 |
| Firefox | 88+ | ✅ | 完全支持 |
| Safari | 14+ | ✅ | 完全支持 |
| Edge | 90+ | ✅ | 完全支持 |

## 获取帮助

如果问题仍然存在：

1. 检查浏览器控制台的错误和警告
2. 查看Network标签，确认请求和响应
3. 检查RouterContext的console.log输出
4. 验证服务器配置文件（vercel.json或_redirects）

## 推荐的分享链接格式

在社交媒体、邮件或其他地方分享链接时，请使用完整格式：

```
https://www.anycall.online/#contact
https://www.anycall.online/#faq
https://www.anycall.online/about
```

**不要使用：**
```
anycall.online#contact  ❌
www.anycall.online#contact  ❌
```