锚点跳转定位异常及选中元素CSS样式设置技术咨询

问题1：给选中的评论元素添加样式 #

<div>默认不属于可聚焦元素，所以:focus伪类不生效。要让带闪烁光标的元素显示自定义样式，有两种可行方法：

方法1：让div支持聚焦，用CSS伪类设置样式 #

修改评论页面的PHP输出代码，给div加上tabindex="-1"（这个属性让元素能被聚焦，但不会被Tab键遍历选中）：

<div id="' . $comment_id . '" tabindex="-1"></div>

然后写对应的CSS样式：

div[tabindex="-1"]:focus {
  outline: 2px solid #007bff; /* 自定义高亮边框 */
  background-color: #f5f5f5; /* 自定义背景色 */
}

方法2：用JS给目标元素添加高亮类 #

页面加载完成后，读取URL里的锚点ID，找到对应元素并手动添加样式类：

window.addEventListener('load', function() {
  const commentId = window.location.hash.slice(1); // 去掉#号，获取纯ID
  if (commentId) {
    const targetEl = document.getElementById(commentId);
    if (targetEl) {
      targetEl.classList.add('comment-active');
      targetEl.focus(); // 触发闪烁光标
    }
  }
});

对应的CSS：

.comment-active {
  outline: 2px solid #28a745;
  background-color: #e8f8e8;
}

问题2：修复锚点跳转到页面底部的问题 #

这种情况大多是因为目标元素不可聚焦，或者页面加载时动态内容（比如图片、异步评论）改变了页面高度，导致浏览器滚动位置计算错误。以下是几种修复方案：

方案1：结合问题1的tabindex设置 #

给评论div加上tabindex="-1"后，浏览器能更精准地定位到元素位置，大概率能解决跳到底部的问题。

方案2：页面加载后手动滚动到目标元素 #

通过JS在页面完全加载后，主动计算元素位置并滚动：

window.addEventListener('load', function() {
  const commentId = window.location.hash.slice(1);
  if (commentId) {
    const targetEl = document.getElementById(commentId);
    if (targetEl) {
      // 滚动到元素顶部，block: 'start'确保元素对齐视口顶部
      targetEl.scrollIntoView({behavior: 'auto', block: 'start'});
      targetEl.focus();
    }
  }
});

如果页面有异步加载的内容，比如延迟加载的评论、图片，可以加个短延迟确保内容加载完成：

window.addEventListener('load', function() {
  setTimeout(() => {
    const commentId = window.location.hash.slice(1);
    if (commentId) {
      const targetEl = document.getElementById(commentId);
      if (targetEl) {
        targetEl.scrollIntoView({block: 'start'});
        targetEl.focus();
      }
    }
  }, 150); // 延迟时间根据实际情况调整
});

方案3：优化跳转逻辑（替代原JS函数） #

原JS跳转函数可以简化，甚至直接用<a>标签更符合HTML语义，避免JS重载的问题：

echo '<a href="index.php?page_id='.$page_id.'#'.$comment_id.'">the page</a>';

如果一定要保留div点击跳转，记得把原JS函数补全（原代码缺少闭合大括号）：

function goToPage(page_id, comment_id){
  var url = 'index.php?page_id='+page_id+'#'+comment_id;
  document.location.href=url;
} // 补上这个闭合大括号

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