搜索栏重复输入相同关键词搜索时无法锚点定位到对应标题如何解决

问题由浏览器锚点定位的默认触发逻辑导致：当首次搜索后页面URL的hash已经被设置为对应锚点值（比如#about），后续滚动页面后再次搜索相同关键词，重复给window.location.hash赋相同值时，浏览器会判定hash无变化，不会触发锚点定位动作。

两种常用修复方案可按需选择：

方案1：兼容原有hash逻辑，修复重复赋值不生效问题 #

仅修改hash赋值逻辑，无需调整其他业务逻辑：

function Focus() {
  var search = document.getElementById("search-box").value;
  var targetHash = '';

  if (search.toLowerCase() == "about") {
    targetHash = '#about';
  } else if (search.toLowerCase() == "skills") {
    targetHash = '#skill';
  } else if (search == "") {
    alert("Search Field is empty. Type anything");
    return;
  } else {
    alert("Not Found");
    document.getElementById("search-box").value = "";
    return;
  }

  // 核心修复：如果当前hash和目标hash一致，先清空再赋值，强制触发定位
  if (window.location.hash === targetHash) {
    history.replaceState(null, null, ' ');
  }
  window.location.hash = targetHash;
  document.getElementById("search-box").value = "";
  console.log(targetHash.slice(1))
}

这里用history.replaceState清空hash不会触发页面跳转到顶部，体验更流畅。

方案2：不依赖hash，直接调用元素滚动API定位 #

这种方式更稳定，不会修改页面URL，也不会产生多余的浏览器历史记录：

function Focus() {
  var search = document.getElementById("search-box").value.toLowerCase();
  var targetId = '';

  if (search === "about") {
    targetId = 'about';
  } else if (search === "skills") {
    targetId = 'skill';
  } else if (search === "") {
    alert("Search Field is empty. Type anything");
    return;
  } else {
    alert("Not Found");
    document.getElementById("search-box").value = "";
    return;
  }

  // 直接触发目标元素滚动定位
  document.getElementById(targetId).scrollIntoView({
    behavior: 'smooth' // 可选参数，添加后为平滑滚动效果，移除则为瞬间跳转
  });
  document.getElementById("search-box").value = "";
  console.log(targetId)
}

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