一：页面代码
<!--网页侧边栏登录,客服,购物车-->
<a name="top"></a>
<div id="rightnav" class="right_lan">
<div class="lan_con">
<div class="ever_one">
<a href="/login.html?ReturnUrl=/detail/${productInfo.ProductCode}.htm">登录</a></div>
<div>
<a href="/carlist.html" class="ever_two"><em>0</em></a></div>
<div class="ever_three">
<a href="javascript:consult();">客服</a>
<script type="text/javascript">
function consult() {
document.getElementById("ccservicebar").click();
}
</script>
</div>
</div>
<div id="back-to-top" class="lan_top">
<a href="#top">顶部</a></div>
</div>
二：Css样式
/*侧边栏（购物车，客服）*/
.right_lan{ position:fixed;right:0; _right:-1px; top:0; width:35px; height:100%;_height:400px; background:#fff; border-left:1px solid #ddd; z-index:88; }
/* 修正IE6振动bu*/
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .right_lan{position:absolute;right:expression(eval(document.documentElement.scrollRight));top:expression(eval(document.documentElement.scrollTop))}
.lan_con{ top:25%; width:35px; position:absolute; }
.ever_one{ width:35px; height:60px; }
.ever_one a{cursor:pointer; text-align:center; display:block; padding-top:35px; color:#666;background:url(/img/rightlan-login.png) no-repeat 3px 0; }
.ever_two{ width:35px; height:71px; padding-left:8px; margin-top:20px; margin-left:-7px; display:block; position:relative; background:url(/img/rightlan-car.png) no-repeat; margin-top:20px;}
.ever_two em{ width:25px; text-align:center; color:#ffea00; padding-top:3px; font-style:normal; font-weight:bold; display:block;}
.ever_three{ width:35px; height:60px; }
.ever_three a{text-align:center; display:block; padding-top:35px; color:#666;background: url(/img/rightlan-kef.png) no-repeat 3px 0; margin-top:20px;}
.lan_top{ width:35px; position:absolute; bottom:15%; background:url(/img/rightlan-top.png) no-repeat 8px 0;}
.lan_top a{text-align:center; display:block; padding-top:30px; color:#aaa;}
三：Js样式
/*显示右边导航*/
$("#rightnav").fadeIn(1500);
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1500);
}
});
$("#back-to-top").click(function () {
$(‘body,html‘).animate({ scrollTop: 0 }, 1000);
return false;
});
四:来一张效果图
左边导航的制作（置顶）