如果一个页面非常长时,在页面右侧增加导航快捷键还是比较有必要的,见效果图:
局部放大后的效果
具体实现代码如下:
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);
}
});