Confluence 增加浮动导航目录

Confluence浮动导航目录

  • 点击“+”, 选择其他宏

在这里插入图片描述

  • 搜索 HTML
    在这里插入图片描述
  • 增加如下HTML代码,就可以展现右下角的导航
<div id='my_toc' style="border:1px solid black;width: 350px;height:600px; overflow:auto; position: fixed; bottom: 20px;right: 25px; z-index: 100; background:url(http://sandbox.runjs.cn/uploads/rs/424/omg6xh6h/o_body_bg_new.jpg);"> </div>
 
<!-- <input type='button' id="btn1" value='把div1内容插入到div2' οnclick='mv_div()'/> -->
  <div style="border:1px solid black;width: 70px;height:30px;  position: fixed; bottom: 20px;right: 25px; z-index: 110; text-align:center;line-height:30px; background-color:white;"  onclick="toggle_toc()">
隐藏/显示
 </div>
<script>
function mv_div(){
    var html = $('.toc-macro');
    $('#my_toc').append(html);
};
$(mv_div)
 
 
function toggle_toc(){
  if($("#my_toc").is(":hidden")){
       $("#my_toc").show();    //如果元素为隐藏,则将它显现
  }else{
      $("#my_toc").hide();     //如果元素为显现,则将其隐藏
  }
}
</script>
### 解决方案概述 为了实现在 Confluence 页面中的目录浮动效果,可以采用 JavaScript 动态加载 HTML 代码的方式,并利用 CSS 控制其样式和位置。具体来说: #### 使用 JavaScript 加载目录目录HTML 结构保存在一个单独的 `.js` 文件中,每次页面加载时通过 JavaScript 动态插入到指定的位置[^3]。 ```javascript // 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]。 ```css /* style.css */ #floating-toc { position: fixed; top: 80px; /* 距离顶部的距离 */ right: 20px; /* 右侧距离 */ width: 250px; background-color: white; border: 1px solid #ccc; padding: 1em; } ``` 此外,还可以为该容器添加一些额外的美化处理,比如阴影、圆角等特性,使视觉体验更佳。 #### 添加平滑滚动功能 为了让用户体验更好,可以在点击链接时加入平滑滚动的功能。此操作同样依赖于 JavaScript 实现。 ```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]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值