如何用jQuery配合scrollIntoView将锚点href对应id元素滚动到页面居中

未阻止a标签的默认锚点跳转行为：点击a标签后，浏览器会优先执行自带的锚点跳转逻辑，直接跳转到对应id元素的顶部，完全覆盖了自定义的scrollIntoView居中滚动的配置。

方案1：修改JS逻辑，保留原生scrollIntoView能力 #

只需要在点击事件回调中新增阻止默认事件的代码即可，修正后的完整代码如下：

$("a").click(function (e) {
  // 阻止默认锚点跳转
  e.preventDefault();
  var target = $($(this).attr("href"));
  // 增加目标存在性判断，避免报错
  if (target.length) {
    target[0].scrollIntoView({
      behavior: "smooth", 
      block: "center"
    })
  }
});

方案2：CSS实现，无需修改JS逻辑 #

如果不需要修改原有JS逻辑，可以给所有锚点目标元素添加CSS属性scroll-margin-top: 50vh，该属性会调整浏览器锚点滚动时的偏移量，50vh等于视口高度的一半，最终呈现的效果就是元素滚动后居中显示，代码如下：

/* 可以替换成你实际需要匹配的目标元素选择器 */
[id] {
  scroll-margin-top: 50vh;
}

方案3：兼容旧浏览器实现 #

如果需要兼容不支持scrollIntoView参数的旧浏览器，可以使用jQuery的animate方法手动计算滚动位置实现居中：

$("a").click(function (e) {
  e.preventDefault();
  var target = $($(this).attr("href"));
  if (target.length) {
    // 计算居中需要的滚动高度：元素距离页面顶部距离 - 视口高度的1/2
    var centerScrollTop = target.offset().top - $(window).height() / 2;
    $("html, body").animate({
      scrollTop: centerScrollTop
    }, 300); // 300为滚动动画时长，单位毫秒
  }
});

• 如果你的滚动区域是自定义的overflow: auto容器而非全局页面，需要对应调整滚动偏移的计算逻辑，或者给scrollIntoView添加inline: "center"参数适配横向滚动场景。
• 部分移动端浏览器对scrollIntoView的behavior: "smooth"支持存在差异，如果发现动画不生效可以降级使用方案3的手动动画实现。

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