解决jQuery锚点滚动时的闪烁问题

嘿，我来帮你搞定这个锚点闪烁的问题！

你现在遇到的核心问题是：虽然用了event.preventDefault()阻止了默认的锚点跳转，但之后直接设置window.location.hash会让浏览器偷偷执行一次默认的锚点定位，这就和你手动做的平滑滚动撞在一起了，所以才会出现闪烁。

要解决这个问题，我们需要换一种方式更新地址栏的hash——用history.pushState()，它可以在不触发浏览器默认锚点跳转的前提下修改地址栏，完美契合你的需求（保留hash方便移动端返回，同时消除闪烁）。

给你修改后的完整代码：

$("a.jump-to-link").click(function (event) {
  event.preventDefault();
  // 先获取目标锚点和偏移量
  const targetHref = $(this).attr("href");
  const targetOffset = $(targetHref).offset().top - 50;
  
  // 执行平滑滚动动画
  $("html, body").animate({
    scrollTop: targetOffset
  }, 500, function() {
    // 滚动完成后再更新hash，用pushState避免浏览器自动跳转
    history.pushState(null, null, targetHref);
  });
});

// 额外处理浏览器的前进后退操作，确保导航时也能平滑滚动
$(window).on("popstate", function() {
  const currentHash = window.location.hash;
  // 检查当前hash对应的元素是否存在
  if (currentHash && $(currentHash).length) {
    const targetOffset = $(currentHash).offset().top - 50;
    $("html, body").animate({
      scrollTop: targetOffset
    }, 500);
  }
});

为什么这样改就有效？

• history.pushState()只会修改地址栏的hash，不会触发浏览器的默认锚点定位，所以不会和平滑滚动冲突，闪烁问题自然就消失了。
• 地址栏的hash被保留了，移动端用户点击返回按钮时，能正常回到之前的页面状态，完全满足你的需求。
• 加上popstate事件监听，是为了处理用户通过浏览器前进/后退按钮切换页面的情况，确保此时页面也能平滑滚动到对应的锚点，体验更完整。

最后提醒一句：要确保页面中每个锚点对应的元素id是唯一的，不然可能会出现定位不准确的问题哦！

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