Flexdashboard多页面侧边栏HTML href跳转异常问题求助

问题根源 #

flexdashboard的多页面采用Tab面板机制，非当前页面的内容会被隐藏。直接使用#row-id格式的锚点时，浏览器可能会优先定位到文档中第一个匹配该ID的元素（通常是首个页面的元素），或者因隐藏元素的滚动逻辑触发页面自动切回初始页面。

可行解决方法 #

方法1：JavaScript强制定位（推荐） #

在侧边栏的跳转链接中添加JS代码，阻止默认锚点行为，直接定位到当前页面的目标行：
修改Cars页面侧边栏的链接代码如下：

<ul>
<li><a href="#row-10" onclick="event.preventDefault(); document.getElementById('row-10').scrollIntoView({behavior: 'smooth'});">Summary</a></li>
<li><a href="#row-12" onclick="event.preventDefault(); document.getElementById('row-12').scrollIntoView({behavior: 'smooth'});">Head of table</a></li>
<li><a href="#row-14" onclick="event.preventDefault(); document.getElementById('row-14').scrollIntoView({behavior: 'smooth'});">Plot</a></li>
</ul>

原理：跳过浏览器默认的全局ID匹配逻辑，直接通过JS找到当前页面的目标行元素并滚动到位，避免跨页面跳转。

方法2：自定义唯一ID #

给每个页面的行设置专属前缀的ID，确保全局唯一：

1. 给目标行添加自定义ID，比如Cars页面的Summary行：

Row {data-height=30 id="cars-summary-row"}
----------------------------------------------------

2. 侧边栏链接改为对应ID：

<li><a href="#cars-summary-row">Summary</a></li>

方法3：利用flexdashboard内置章节导航 #

给需要跳转的行添加章节标题，使用内置的链接格式：

1. 给行绑定章节ID：

### Cars Summary {#cars-summary}
Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------

2. 侧边栏用Markdown链接格式：

- [Summary](#cars-summary)

flexdashboard会自动处理多页面的跳转逻辑，无需额外JS。

修改后的代码片段示例 #

以下是调整后的Cars页面核心代码：

Cars {data-orientation=rows}
=======================

Sidebar-cars {.sidebar}
-------------
<br>

### My Cars sidebar 

<font size='-1'>
<ul>
<li><a href="#row-10" onclick="event.preventDefault(); document.getElementById('row-10').scrollIntoView({behavior: 'smooth'});">Summary</a></li>
<li><a href="#row-12" onclick="event.preventDefault(); document.getElementById('row-12').scrollIntoView({behavior: 'smooth'});">Head of table</a></li>
<li><a href="#row-14" onclick="event.preventDefault(); document.getElementById('row-14').scrollIntoView({behavior: 'smooth'});">Plot</a></li>
</ul></font>
</p>

Row {data-height=30}
----------------------------------------------------
<font size = '6'><span style="color: #0073B7;">**My Cars Page**</font size>

Row {data-height=100}
----------------------------------------------------

Row {data-height=30 id="row-10"}
----------------------------------------------------
<font size = '4'><span style="color: #0073B7;">*Information part 1**</font size>

Row {data-height=500 .tabset .tabset-fade}
----------------------------------------------------
```{r}
summary(cars)

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