bm-translations网站导航锚点滚动+自动点击元素问题求助

你的代码导致网站崩溃的核心原因在于多重跳转行为冲突，加上路径不一致的问题：

• 同时触发了锚点跳转和location页面跳转，两种行为互相干扰引发页面异常重载
• 跳转的URL路径不一致（km.php/#video vs km/#video），可能触发错误的页面导航
• 没有控制事件执行顺序，元素点击事件可能还没完成就被页面跳转打断

正确实现方案 #

我们需要先阻止默认跳转行为，确保元素点击事件执行完成后，再平滑滚动到目标锚点，同时保持URL状态一致。

步骤1：简化链接HTML结构

把原来的复杂链接改成简洁形式，用类名标记方便JS绑定事件：

<a href="#video" class="mediengestaltung-nav-link">Mediengestaltung</a>

步骤2：添加JavaScript事件处理

在页面底部或独立脚本文件中加入以下代码：

// 获取导航链接元素
const mediengestaltungLink = document.querySelector('.mediengestaltung-nav-link');

if (mediengestaltungLink) {
  mediengestaltungLink.addEventListener('click', function(e) {
    // 1. 阻止默认锚点跳转，避免行为冲突
    e.preventDefault();
    
    // 2. 触发#design元素的点击事件（先校验元素是否存在）
    const designBtn = document.getElementById('design');
    if (designBtn) {
      designBtn.click();
    }
    
    // 3. 平滑滚动到#video锚点区域
    const videoSection = document.getElementById('video');
    if (videoSection) {
      videoSection.scrollIntoView({ 
        behavior: 'smooth', // 可选：开启平滑滚动效果
        block: 'start'      // 滚动到元素顶部位置
      });
    }
    
    // 4. 更新URL锚点，保持浏览器历史记录的正确性
    window.history.pushState({}, document.title, '#video');
  });
}

方案优势说明 #

• 先阻止默认跳转，避免页面提前刷新导致点击事件失效
• 明确事件执行顺序：先触发按钮点击，再处理滚动行为
• 用scrollIntoView替代原生锚点跳转，更灵活控制滚动体验
• 更新URL锚点，让页面状态与用户操作保持一致

额外注意事项 #

• 确保#design和#video元素确实存在于页面中，避免出现null报错
• 如果不需要平滑滚动，可移除behavior: 'smooth'参数
• 若确实需要跳转到其他页面的锚点，建议先完成点击事件，再延迟执行页面跳转（但不推荐，会丢失当前页面状态）

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