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>

css相关代码

/*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: 5px;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 ;cole.log(id=  id  ,scroH=  scroH);$(	html	).animate({ scrollTop: scroH }, 500);}
});