H5仿iOS侧边字母垂直居中悬浮导航条

html代码

<div class="list">
    <a class="item" href="#GroupA">A</a>
    <a class="item" href="#GroupB">B</a>
    <a class="item" href="#GroupC">C</a>
    <a class="item" href="#GroupD">D</a>
    <a class="item" href="#GroupE">E</a>
    <a class="item" href="#GroupF">F</a>
    <a class="item" href="#GroupG">G</a>
    <a class="item" href="#GroupH">H</a>
</div>

样式

<style>
    .list{
        position:fixed;
        display: flex;
        flex-direction: column;
        justify-content: center;
        top: 0;
        right: 20px;
        bottom: 0;
        width: 10px;
        z-index: 1000;
    }
    .list .item{
        line-height: 25px;
        color: gray;
        text-align: center;
    }
</style>

简单好用！