如何实现点击目录标题动态跳转到正文对应标题位置

核心逻辑是利用HTML原生锚点规则实现跳转，只需要两步操作：给正文所有h2标签添加唯一id属性，目录项的链接指向对应id即可。

完整代码实现 #

第一步：处理正文并收集标题 #

用回调替换的方式，一次完成h2标签加id、标题收集两个操作：

$headingList = [];
$headingTag = 'h2';
$idPrefix = 'toc-'; // 锚点id前缀，避免和页面其他元素id冲突

// 处理正文内容，给h2加id，同时收集标题
$processedLes = preg_replace_callback(
    '|<'.$headingTag.'>(.*)</'.$headingTag.'>|iU',
    function($matches) use (&$headingList, $idPrefix, $headingTag) {
        $index = count($headingList) + 1;
        $headingList[] = $matches[1];
        // 返回带唯一id的h2标签
        return '<'.$headingTag.' id="'.$idPrefix.$index.'">'.$matches[1].'</'.$headingTag.'>';
    },
    $les
);

第二步：生成目录HTML #

// 生成目录结构
$tocHtml = '<div class="toc"><h3>目录</h3><ul>';
foreach($headingList as $index => $title) {
    $tocId = $idPrefix . ($index + 1);
    $tocHtml .= '<li><a href="#'.$tocId.'">'.htmlspecialchars($title).'</a></li>';
}
$tocHtml .= '</ul></div>';

使用说明 #

• 输出正文时替换原来的$les为处理后的$processedLes
• 把生成的$tocHtml输出到你需要展示目录的位置即可
• 如果需要点击后平滑滚动到对应位置，只需在页面CSS中添加规则：html { scroll-behavior: smooth; }

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