Moyen de conserver l'élément sélectionné dans le menu de la barre latérale en haut après le rechargement de la page

Question

J'ai un menu de barre latérale défilante. Ainsi, lorsque je sélectionne un élément de menu, il doit apparaître en haut de la barre latérale. Il n'y a aucun problème pour configurer le menu actif. J'ai compris. Mais je ne parviens pas à définir la position supérieure de la barre latérale. Veuillez ne pas recommander jQuery. Au lieu de cela, on m'a conseillé d'utiliser du JavaScript simple Voici une référence de code

.sidebar{
    height:100px
    overflow-y:scroll;
}
.sidebar ul li{
    padding:30px;
}

<!-- CSS -->

 <!-- html  -->
<div class="sidebar">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>........
    <li>item100</li>
  </ul>
</div>

Answer 1

Solution CSS pure utilisant les propriétés :target 伪类、flexbox 布局以及 order.

.sidebar {
  background-color: #ddd;
  height: 200px;
  overflow-y: scroll;
}
.sidebar ul {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.sidebar li {
  padding: 1em;
  order: 1;
}
.sidebar :target {
  background-color: #aaa;
  order: 0;
}

<div class="sidebar">
  <ul>
    <li id="item1"><a href="#item1">item1</a></li>
    <li id="item2"><a href="#item2">item2</a></li>
    <li id="item3"><a href="#item3">item3</a></li>
    <li id="item4"><a href="#item4">item4</a></li>
    <li id="item5"><a href="#item5">item5</a></li>
    <li id="item7"><a href="#item7">item7</a></li>
    <li id="item8"><a href="#item8">item8</a></li>
    <li id="item9"><a href="#item9">item9</a></li>
    <li id="item100"><a href="#item100">item100</a></li>
  </ul>
</div>