Confluence 6 移动浏览查看页面,博客和评论

单击面板上的链接,或者任何其他页面。Confluence 将会显示链接的页面,博客页面或者评论。

你可以:

  • 查看内容,单击链接来移动到其他的页面同时可以使用支持的移动浏览器的功能来进行交互。
  • 对页面,博客页面或者评论来点赞或取消点赞。
  • 对页面,博客页面或者评论来关注或取消关注。
  • 添加或者回复一个评论。

有关更多Confluence 6 移动界面的使用,请参考页面通过你的移动浏览器使用 Confluence中的内容。

 

https://www.ossez.com/t/confluence-6/450

### 解决方案概述 为了实现在 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
发出的红包

打赏作者

HoneyMoose

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值