重新加载页面后如何将所选项目保持在侧边栏菜单的顶部

Question

我有一个滚动的侧边栏菜单。所以当我 select 一个菜单项时，它应该显示在侧边栏的顶部 position。 设置活动菜单没问题。 我知道了。 但我无法设置侧边栏的顶部 position。 请不要建议 jQuery。而是建议我 vanilla JavaScript这里是一些代码参考

 .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

使用:target伪类的纯 CSS 解决方案，具有order属性的flexbox布局。

 .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>