Mapbox flyTo点击列表项触发页面刷新/滚动问题求助

问题根源是代码中使用了href="#"的<a>标签，点击时浏览器会触发默认锚点跳转行为，直接跳转到页面顶部——这就是你部署后遇到页面滚动/刷新问题的原因，官方示例的轻微滚动也是同样逻辑导致的。

以下两种方案均可解决问题：

方案一：修改a标签的href属性 #

将创建链接的代码里link.href = '#'替换为link.href = 'javascript:void(0)'，既保留链接样式，又不会触发默认跳转：

/* Add the link to the individual listing created above. */
const link = listing.appendChild(document.createElement('a'));
link.href = 'javascript:void(0)'; // 替换原有的#
link.className = 'title';
link.id = `link-${location.properties.id}`;
link.innerHTML = `${location.properties.project_site}`;

方案二：在点击事件中阻止默认行为 #

找到给列表项绑定点击事件的代码（即控制地图缩放的逻辑部分），在事件处理函数中添加event.preventDefault()，直接阻断浏览器的默认跳转动作：

link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认锚点跳转
  // 原有缩放地图的逻辑代码，示例：
  map.flyTo({
    center: location.geometry.coordinates,
    zoom: 12
  });
});

两种方案任选其一即可，修改后点击列表项只会触发地图缩放，不会再导致页面滚动到顶部。

内容的提问来源于stack exchange，提问作者Melissa