conflunce设置浮动导航方法，提高效率

背景

我们文档很长时，即使添加了目录，每次想要找到对应内容时，也需要回到文章的开头去找目录，而且目录很长，找起来就很麻烦，于是我就想起来，把目录变成浮动的，这样就不需要哦把页面翻来翻去，不用浪费时间在回到文章开头，提高读取文档的效率

我们自己的文章添加浮动目录

方法一：添加用户自定义宏，这种方式需要有confluence超级管理员权限才能操作
方法二：在我们的文章里添加普通目录宏，然后再添加html宏，把下面代码插入到HTML宏内容中就可以

效果图：

<!-- 创建一个浮动的右侧导航div --> 
<div id='my_toc_div' style="width: 350px; position: fixed; bottom: 20px;right: 25px; z-index: 100; background: rgb(227 227 227 / 78%);"> 
<div style="padding: 8px;text-align: center;background: linear-gradient(45deg, black, transparent);color:#fff"><strong>导航目录</strong></div> 
<div id='my_toc' style="width: 350px;height:500px; overflow:auto;  margin-bottom: 30px;">
</div>
</div>
<button style="position: fixed; bottom: 20px;right: 25px; z-index: 110;background-color: coral;"  
	class="aui-button aui-button-primary" onclick="toggle_toc()">
    隐藏/显示
</button > 
<script>     
function move_toc_to_my_div() {
	var origin_toc_html = $('.toc-macro');
	$('#my_toc').append(origin_toc_html);
};
function toggle_toc() {
	if ($("#my_toc_div").is(":hidden")) {
		$("#my_toc_div").slideToggle(); 
	} else {
		$("#my_toc_div").slideToggle(); 
	}
}
$(move_toc_to_my_div);
 </script>

别人的文章，变成浮动目录

别人的文章我们没办法修改，所以只能添加脚本方式把目录变成浮动的，方式如下
步骤一：浏览器添加书签，书签名自己定，url内容是下面代码
步骤二： 打开别人的文档，当有目录存在时，点击我们步骤一的书签，就可以把目录变成浮动的
代码和效果图如下：

javascript:$("#content").append("<!-- 创建一个浮动的右侧导航div -->

<div id=\'my_toc_div\' style=\"width: 350px; position: fixed; bottom: 20px;right: 25px; z-index: 100; background: rgb(227 227 227 / 78%);\"> 
<div style=\"padding: 8px;text-align: center;background: linear-gradient(45deg, black, transparent);color:#fff\"><strong>导航目录</strong></div> 
<div id=\'my_toc\' style=\"width: 350px;height:500px; overflow:auto;  margin-bottom: 30px;\">
</div>
</div>
<button style=\"position: fixed; bottom: 20px;right: 25px; z-index: 110;background-color: coral;/*border:1px solid black;width: 70px;height:30px;  text-align:center;line-height:30px; */\"  
	class=\"aui-button aui-button-primary\" onclick=\"toggle_toc()\">
    隐藏/显示
</button >");
function move_toc_to_my_div() {
	var origin_toc_html = $('.toc-macro');
	$('#my_toc').append(origin_toc_html);
};
function toggle_toc() {
	if ($("#my_toc_div").is(":hidden")) {
		$("#my_toc_div").slideToggle(); 
	} else {
		$("#my_toc_div").slideToggle(); 
	}
}
$(move_toc_to_my_div);