HTML锚点跳转目标位于页面底部时无法显示在窗口顶部如何解决

问题原因 #

默认浏览器的锚点滚动逻辑以页面滚动到底部为上限，当锚点目标元素距离页面底部的高度小于浏览器视口高度时，页面没有多余的空间继续向上滚动，就会出现目标元素无法对齐视口顶部的情况。

解决方案 #

方法1：纯CSS实现（无额外脚本，兼容性好） #

通过给页面底部添加足够的可滚动空白，保证锚点元素有足够的向上滚动空间，同时配置滚动对齐规则：

/* 配置锚点跳转时的对齐规则，block: start表示对齐视口顶部 */
:target {
  scroll-margin-top: 0;
}
/* 给页面添加底部空白，高度等于视口高度，保证最后一个元素也能滚动到顶部 */
body {
  padding-bottom: 100vh;
  box-sizing: border-box;
}

如果不想给整个页面加底部空白，也可以仅给最后一个锚点目标元素添加占位伪元素：

#summary::after {
  content: "";
  display: block;
  height: 100vh;
}

方法2：JavaScript控制滚动（无多余页面空白，灵活可控） #

监听锚点点击和页面加载事件，手动调用滚动接口强制元素对齐视口顶部：

// 监听锚点链接点击事件
document.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('#')) {
    e.preventDefault();
    const targetId = e.target.getAttribute('href').substring(1);
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      // 第一个参数为true即表示滚动到元素对齐视口顶部
      targetElement.scrollIntoView(true);
      // 如需平滑滚动替换为下面的写法
      // targetElement.scrollIntoView({block: 'start', behavior: 'smooth'})
    }
  }
})

// 兼容页面直接带hash参数打开的场景
window.addEventListener('load', function() {
  if (location.hash) {
    const targetElement = document.getElementById(location.hash.substring(1));
    targetElement?.scrollIntoView(true);
  }
})

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