<div class="article">
  <p>Salemolestie dolorem dolores pri purus tamquam solet ludus perpetua finibus. Commodomediocritatem regione quot convenire repudiare novum oratio has ea assueverit vituperata eam vero integer idque.
  </p>

  <div class="toc-wrap">
  <div class="toc-h">টেবিল অব কন্টেন্ট</div>
    <ol>
      <li><a href="#সেকশন_১">সেকশন ১</a></li>
      <li><a href="#সেকশন_২">সেকশন ২</a></li>
      <li><a href="#সেকশন_৩">সেকশন ৩</a></li>
    </ol>
  </div>
  Iuscorrumpit integer eam fastidii dicat hendrerit. Sonetdissentiunt comprehensam dolores postea proin meliore vulputate tellus vitae luptatum dissentiunt fabellas atqui sadipscing.
  <h3 id="সেকশন_১">সেকশন ১</h3>
  Dicuntinterdum senserit vis maiorum maiorum delenit commune sententiae quas sale justo. Ceteronostra mnesarchum bibendum velit doctus tation accommodare elementum vehicula usu. Urnapharetra suspendisse ignota meliore dictas an deserunt tractatos dolores. Variusdiscere referrentur neglegentur feugait nibh appareat sapientem mentitum alterum donec non dis.
  <h3 id="সেকশন_২">সেকশন ২</h3>
  Viminterdum menandri facilis veniam idque. Laboressonet imperdiet diam facilisis mi pericula potenti. Inanifinibus nunc sea adipisci recteque mutat purus. Quoharum egestas regione ridiculus ridens doming meliore rutrum eloquentiam vehicula.
  Numquamoffendit quod. Famessociosqu inani pertinax duis patrioque aeque persecuti principes consectetur veritus te dis error quaeque fuisset atomorum. Soletfinibus has theophrastus primis doctus habitasse suas rhoncus offendit mazim voluptatibus himenaeos ancillae sollicitudin litora. Portasociosqu pulvinar sollicitudin invenire voluptatum phasellus viris inani. Verearnihil option. Nequedicant quem maiorum.
  <h3 id="সেকশন_৩">সেকশন ৩</h3>
  Nihilpetentium nihil gubergren tempor dictum splendide prodesset senserit. Ultricesinterdum simul feugiat posse. Elitrsit sem definiebas percipit noluisse similique consectetuer praesent omittam postulant nulla contentiones.

</div>

* {
  scroll-behavior: smooth;
}

.toc-wrap {
  padding: 12px;
  margin: 15px;
  max-width: 380px;
  background: #14694580;
  border: 2px dashed #167555;
  border-radius: 4px;
}
.toc-wrap ol {
  list-style-type: bengali;
  margin: 0 0 0 30px;
}
.toc-wrap li {
  border-left: 1px dotted red;
  line-height: 2em;
}
.toc-wrap li:before {
  width: 1.8em;
  height: 0.9em;
  vertical-align: top;
  border-bottom: 1px dotted red;
  content: "";
  display: inline-block;
}
.toc-wrap li:last-child {
  border-left: none;
}
.toc-wrap li:last-child:before {
  border-left: 1px dotted red;
}
.toc-h {
  font-size: 18px;
  border-bottom: 1px dotted blue;
}
.toc-h:before {
  content: " \2261";
  font-weight: bold;
  display: inline-block;
  height: 16px;
  margin: 0 10px 0 0;
  color: blue;
}




.article {
  padding: 10px;
}

a {
  text-decoration: none;
  color: #943643;
}