如何自定义HTML锚点标签链接未找到时的提示消息？

当页面锚点链接对应的目标元素不存在时，可以通过JavaScript实现自定义提示，以下是几种实用方案：

方法一：监听锚点变化与页面加载事件 #

通过监听hashchange事件（锚点变化时触发）和load事件（页面初始加载时触发），检查目标元素是否存在，不存在则展示自定义提示：

// 页面加载完成后检查初始锚点
window.addEventListener('load', checkAnchorValidity);
// 监听地址栏锚点变化
window.addEventListener('hashchange', checkAnchorValidity);

function checkAnchorValidity() {
  const targetId = window.location.hash.slice(1); // 移除锚点前的#符号
  if (targetId) {
    const targetElement = document.getElementById(targetId);
    if (!targetElement) {
      // 自定义提示内容
      alert('抱歉，您访问的锚点不存在！');
      // 可选：清除地址栏中的无效锚点
      window.history.replaceState(null, null, window.location.pathname);
    }
  }
}

方法二：拦截锚点点击行为 #

提前拦截<a>标签的点击事件，判断目标锚点是否存在，避免无效跳转：

document.addEventListener('click', function(e) {
  const anchorLink = e.target.closest('a');
  // 判断是否为本页面的锚点链接
  if (anchorLink && anchorLink.hash && anchorLink.origin === window.location.origin && anchorLink.pathname === window.location.pathname) {
    const targetId = anchorLink.hash.slice(1);
    const targetElement = document.getElementById(targetId);
    if (!targetElement) {
      e.preventDefault(); // 阻止默认跳转行为
      alert('该锚点链接不存在，请检查！');
    }
  }
});

自定义样式提示（替代系统alert） #

如果需要更美观的提示效果，可以自定义弹窗元素：

1. 先添加提示框HTML #

<div id="anchorAlert" style="display: none; position: fixed; top: 30px; left: 50%; transform: translateX(-50%); padding: 12px 24px; background-color: #f55; color: #fff; border-radius: 6px; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
  锚点不存在，请重新操作！
</div>

2. 修改JavaScript中的提示逻辑 #

function showAnchorAlert() {
  const alertBox = document.getElementById('anchorAlert');
  alertBox.style.display = 'block';
  // 3秒后自动隐藏提示框
  setTimeout(() => {
    alertBox.style.display = 'none';
  }, 3000);
}

// 替换之前方法中的alert为showAnchorAlert()
// 示例：在checkAnchorValidity函数中
if (!targetElement) {
  showAnchorAlert();
  window.history.replaceState(null, null, window.location.pathname);
}

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