Mapbox - FlyTo 单击重新加载网页

Question

我使用 这个 Mapbox 教程 来构建地图。当我加载在 CodePen 中创建的地图时，它按预期工作。当您单击左侧菜单中的列表时，它会缩放到该位置。但是，当我将地图放在“网站”上时，单击左侧菜单中的列表会重新加载页面或将页面滚动到顶部。要查看行为，请在网站上向下滚动以使地图框居中，然后单击列表中的位置。对于大多数项目，它将滚动到页面顶部。我在 iOS 上的 Chrome、Firefox 和 Safari 中经历过这种行为。 我怀疑这与构建列表的方式有关：

      /* Add the link to the individual listing created above. */
      const link = listing.appendChild(document.createElement('a'));
      link.href = '#';
      link.className = 'title';
      link.id = `link-${location.properties.id}`;
      link.innerHTML = `${location.properties.project_site}`;

但是我尝试改变的一切都破坏了它。

我还意识到，回到我正在使用的 Mapbox 教程，当我单击页面末尾的

他们的地图

上的列表时，页面也会向下滚动一点。所以我认为它一定是原始代码中的某些内容，而不是我更改的内容？ 我尝试在 Wix 网站而不是 Squarespace 网站上使用地图代码，但遇到了同样的问题。

Answer 1

<a>

元素链接到

#

，它们将导致浏览器在单击时跳转到顶部。在 Codepen 上，这种情况不会发生，或者说是不可见的，因为您的地图和侧边栏占据了页面的整个高度。您可以通过在 Codepen 中的第 348 行中稍微修改这部分代码来防止跳转，添加

event

函数参数，然后调用

event.preventDefault()

:

link.addEventListener('click', function (event) {
    event.preventDefault()
    // rest of the function
});

出于语义考虑，还建议或最佳实践将属性 

role='button'

添加到

<a>

标签中：

link.role = 'button';

您可以在这些 Stackoverflow 问题中阅读更多相关信息：

锚元素onClick使页面跳转到页面顶部
• 不带 href="#" 的脚本链接