同页面锚点链接仅部分生效，寻求技术解决方案

根据你描述的情况，部分锚点能正常跳转，而#Machinerooster和#Afdelingen只改URL不滚动，排除了<base>标签、重复ID和嵌套问题后，我给你几个常见的排查方向和解决方案：

1. 检查目标元素或其父元素的CSS属性 #

浏览器对锚点的滚动计算可能被某些CSS属性干扰，最常见的是：

• transform属性：如果目标元素的某个父级容器设置了transform: translate()、scale()等属性，浏览器会把这个容器当作新的「视口」，锚点定位会局限在这个容器内部，而不是整个页面。解决方法是移除不必要的transform属性，或者调整锚点目标到不受transform影响的元素上。
• 固定导航栏的间接影响：如果页面顶部有固定导航栏，虽然你是完全不滚动而非遮挡，但可以试试给全局设置滚动内边距，强制浏览器计算滚动位置时避开导航栏：

  html {
    scroll-padding-top: 80px; /* 替换成你的导航栏实际高度 */
  }
  

2. 排查是否有JavaScript阻止了默认滚动行为 #

检查页面中是否有监听锚点链接click事件的代码，比如：

document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 这行代码会直接阻止浏览器默认的锚点滚动行为
    // 其他自定义逻辑
  });
});

如果有类似代码，要么移除e.preventDefault()，要么在自定义逻辑中手动添加滚动到锚点的代码：

const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
  targetElement.scrollIntoView({ behavior: 'smooth' });
}

3. 再次确认目标元素的可见性和尺寸 #

虽然你说目标元素没嵌套，但还是要检查：

• 目标元素或其父元素是否设置了display: none、visibility: hidden？如果元素完全不可见，浏览器可能无法计算滚动位置。
• 元素的实际高度是否为0？比如h2标签有没有被CSS重置导致没有内容高度？可以在浏览器开发者工具中选中目标元素，查看「布局」面板确认元素的实际尺寸。

4. 禁用浏览器的滚动锚定功能 #

某些浏览器的「滚动锚定」功能可能会干扰锚点跳转，你可以尝试在页面的<html>标签中添加属性禁用它：

<html style="overflow-anchor: none;">

或者用CSS全局设置：

html {
  overflow-anchor: none;
}

你可以按这个顺序逐一排查，大概率是CSS或JavaScript的问题导致的~

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