html右侧增加页面导航快捷键效果图及代码

如果一个页面非常长时，在页面右侧增加导航快捷键还是比较有必要的，见效果图：

局部放大后的效果

具体实现代码如下：

html相关代码

<!-- 回到顶部代码，这里的id对应当前页面 -->
<div class="gototop none">
    <div >
        <a href="#" data-id="#goto-top"><img src="/static/imgs/top.png"></a>
        <div class="underline"></div>
    </div>
    <div>
        <a href="#" data-id="#goto-type">城市维度</a>
        <div class="underline"></div>
    </div>
    <div>
        <a href="#" data-id="#goto-product">商品分类</a>
        <div class="underline"></div>
    </div>
    <div>
        <a href="#" data-id="#goto-history">历史对比</a>
        <div class="underline"></div>
    </div>
    <div>
        <a href="#" data-id="#goto-eliminate">汰换对比</a>
        <div class="underline"></div>
    </div>
    <div >
        <a href="#" data-id="#goto-sum">动销率汇总</a>
    </div>

</div>

css3相关代码

/*gototop*/
.gototop{
    position: fixed;
    right:10px;
    bottom: 10px;
    width: 68px;
    text-align:center;
    background-color: #E0E0E0;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.26);
    overflow: hidden;
}
.gototop > div {
    width: 53px;
    font-size: 12px;
    color: #666666;
    margin: 0 auto;
    padding: 16px 0 0 0;
    cursor:pointer ;
}
.gototop .underline{
    margin-top:16px;
    border-top: 1px solid #F7F7F7;
    border-bottom: 1px solid #D1D1D1;
}
.gototop a,.gototop a:focus,.gototop a:hover {
    color: #666666;
}

.none {
    display: none !important;
}

js相关代码

/*gototop*/
$(".gototop").on("click","a",function(){
    var id=$(this).attr("data-id");
    if(id=="#goto-top"){
        $('html').animate({ scrollTop: 0 }, 500);
    }else{
        var scroH=$(id).offset().top - 100 ;
        console.log("id=" + id + ",scroH=" + scroH);
        $('html').animate({ scrollTop: scroH }, 500);
    }
});