一：页面代码
<!--网页侧边栏登录,客服,购物车--><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; });
四:来一张效果图
转载于:https://www.cnblogs.com/lidj/p/3896519.html
相关资源：织梦科技资讯织梦博客模板宽屏带数据