/* 目录按钮的样式 */
#table-of-contents {
    position: fixed;
    bottom: 90px; /* 距离返回顶部按钮的高度 */
    right: 30px;
    background-color: rgba(51, 51, 51, 0.297);
    background-image: url('https://img2023.cnblogs.com/blog/3014246/202411/3014246-20241101185813954-976790276.svg');
    background-size: 75%;
    border: none;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px; /* 圆角方形 */
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(-1); /* 左右反转 */
}

/* 返回顶部按钮的样式 */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: rgba(51, 51, 51, 0.297);
    background-image: url('https://img2023.cnblogs.com/blog/3014246/202410/3014246-20241031114145944-1883794210.svg'); /* 替换为你的箭头图片路径 */
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0;
    visibility: hidden;
}


/* 当用户滚动时显示按钮 */
#table-of-contents.show,
#back-to-top.show {
    opacity: 1;
    visibility: visible;
}