Mapbox 地图中使用 触发 flyTo 时，浏览器默认会跳转至页面顶部，造成体验中断；只需在点击事件中调用 event.preventDefault() 并补充语义化属性即可彻底解决。
mapbox 地图中使用 `` 触发 `flyto` 时，浏览器默认会跳转至页面顶部，造成体验中断；只需在点击事件中调用 `event.preventdefault()` 并补充语义化属性即可彻底解决。
在基于 Mapbox 构建地点定位器（如商店查找器）时，一个常见且易被忽视的问题是：当用户点击左侧地址列表中的某一项时，地图本应平滑飞向对应位置，但实际却触发了页面滚动至顶部，甚至在某些环境下意外刷新。根本原因在于代码中创建的链接元素使用了 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"：
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="title" id="link-123">北京朝阳门店</a>
虽然 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 在语义上表示“当前页面的片段标识符”，但当页面中不存在匹配的 id 时，浏览器会默认将视口滚动到文档起始位置——这正是你在 Squarespace、Wix 或自建网站中观察到“页面上跳”的本质原因。而 CodePen 中未明显复现，仅因其预览容器高度占满视口，滚动变化不可见，并非问题不存在。
✅ 正确做法是阻止默认行为，并提升可访问性：
// 替换原 link.addEventListener(...) 的写法
link.addEventListener('click', function (event) {
event.preventDefault(); // ? 关键：阻止 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 的默认跳转
map.flyTo({
center: [location.geometry.coordinates[0], location.geometry.coordinates[1]],
zoom: 14,
essential: true
});
});
同时，为符合 WAI-ARIA 最佳实践，应明确告知辅助技术这是一个交互式按钮而非导航链接：
link.role = 'button'; // 语义化声明
link.setAttribute('aria-label', `定位到 ${location.properties.project_site}`); // 可选：增强无障碍支持
⚠️ 注意事项：
- 切勿仅依赖
return false（它会同时阻止冒泡和默认行为，可能影响嵌套事件逻辑），event.preventDefault()更精准可控； - 避免移除
href属性来“修复”——这将导致键盘用户无法通过Enter键触发，也破坏焦点管理； - 若需支持键盘操作，建议额外监听
keydown事件（如Enter和Space），保持与原生按钮一致的行为。
总结：href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 不等于“无跳转”，而是“跳转至文档顶部”。真正的无跳转交互需显式拦截默认行为，并辅以恰当的 ARIA 角色。这一原则不仅适用于 Mapbox，也是所有前端链接式按钮开发的通用规范。
