confluence 目录浮动

### 解决方案概述

为了实现在 Confluence 页面中的目录浮动效果，可以采用 JavaScript 动态加载 HTML 代码的方式，并利用 CSS 控制其样式和位置。具体来说：

#### 使用 JavaScript 加载目录
将目录的 HTML 结构保存在一个单独的 `.js` 文件中，每次页面加载时通过 JavaScript 动态插入到指定的位置[^3]。

// menu.js
document.addEventListener('DOMContentLoaded', function() {
    var tocContainer = document.createElement('div');
    tocContainer.id = 'floating-toc';
    
    // 插入目录结构
    tocContainer.innerHTML = `
        <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <!-- 更多条目 -->
        </ul>`;
        
    document.body.appendChild(tocContainer);
});

#### 应用 CSS 设置浮动效果
使用 CSS 来定义 `#floating-toc` 容器的行为，使其能够跟随用户的滚动而移动。这可以通过设置固定定位并调整相应的偏移量来完成[^1]。

/* style.css */
#floating-toc {
    position: fixed;
    top: 80px; /* 距离顶部的距离 */
    right: 20px; /* 右侧距离 */
    width: 250px;
    background-color: white;
    border: 1px solid #ccc;
    padding: 1em;
}

此外，还可以为该容器添加一些额外的美化处理，比如阴影、圆角等特性，使视觉体验更佳。

#### 添加平滑滚动功能
为了让用户体验更好，可以在点击链接时加入平滑滚动的功能。此操作同样依赖于 JavaScript 实现。

// smooth-scroll.js
document.querySelectorAll('#floating-toc a').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);

        window.scrollTo({
            top: targetElement.offsetTop,
            behavior: "smooth"
        });
    });
});

以上方法不仅实现了目录的浮动显示，还增强了交互性和美观度，使得文档浏览更加便捷高效[^2]。