JS 自動で目次を生成する機能を実装しました

https://qiita.com/RYO_nami/items/10cb1db00b200e1288ca

↑　参考にしたサイト

   <details id="table-of-content"  style="user-select: none;"><summary></summary></details>

<script>
const all = document.getElementById("all");
// body要素
// body要素
let body_element = document.querySelector('html body');

const child = document.getElementById("table-of-content");

//目次要素を一番上に移動させるコードです。　
body_element.prepend(child);


document.addEventListener('DOMContentLoaded', () => {
    const heads = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    if (heads && heads.length) {
        let contents = '';
        heads.forEach((head, i) => {
            let className = '';
            switch(head.localName) {
                case "h1":
                    className = `contents1`;
                    break;
                case "h2":
                    className = `contents2`;
                    break;
                case "h3":
                    className = `contents3`;
                    break;
                case "h4":
                    className = `contents4`;
                    break;
                case "h5":
                    className = `contents5`;
                    break;
                case "h6":
                    className = `contents6`;
                    break;
            }
            contents += `<li><a class="${className}" href="#head${i}"  onclick="tab_close()">${head.textContent}</a></li>`;
            head.innerHTML = `<a id="head${i}"></a>` + head.innerHTML;
        })
        document.querySelector('#table-of-content').innerHTML += `<ol>${contents}</ol>`;


    }
});


function tab_close(){

    child.open = false;
}

</script>

<details id="table-of-content"  style="user-select: none;"><summary></summary></details>

に目次が挿入されます。

a {
    text-decoration:none;
    color: white;
    
    padding: 5px;
    font-weight:700;

    display: block;


    

}

li {
    list-style: none;
}

.contents1 {
    margin-left: 0px;
}
.contents2 {
    margin-left: 15px;
}
.contents3 {
    margin-left: 30px;
}
.contents4 {
    margin-left: 45px;
}
.contents5 {
    margin-left: 60px;
}
.contents6 {
    margin-left: 75px;
}
#table-of-content{

    position: sticky; /* ここに注目! */
  top: 0;
  right: 0;
  font-size: 12px;
  height: 100%;
  
  padding: 10px;
}

#table-of-content:hover{

    background-color: #000000;
}