随页面滑动且漂浮在左右的快捷操作按钮

最近在做一单品的销售网页，参考了一下山寨机的销售页面，做的到处都是订购下单按钮，有点让人烦！如何能让销售按钮即方便点击，又能保持在用户当前访问的屏幕呢！滑动，是不错的选择！

滑动菜单，能跟随用户翻屏行为，还能在菜单里添加一些回顶、回底等快捷操作，用户体验方面肯定会有不小的提升！

以下是核心代码部分，喜欢的请拿走自行修改！

<style>
    body {background:#454545;}
    .content{margin:0 atuo; width:960px; background:#fff;}
    /* 图标漂浮在右 */
    #shangxia{position:absolute;top:30%;right:50%;margin-right:-520px;display:block; z-index:999999;}
    #shang{background:url(images/t.png) no-repeat;position:relative;cursor:pointer;height:40px;width:40px;margin:10px 0;}
    #gobuy{background:url(images/gobuy.gif) no-repeat;position:relative;cursor:pointer;height:40px;width:40px;margin:10px 0;}
    #xia{background:url(images/d.png) no-repeat;position:relative;cursor:pointer;height:40px;width:40px;margin:10px 0;}

    /* 图标漂浮在左 */
    #Qonline{position:absolute;top:40%;left:50%;margin-left:-605px;display:block; z-index:999999;}
    #q1{background:url(images/q.gif) no-repeat 0px 0px;position:relative;cursor:pointer;width:123px;height:35px;margin:0px; line-height:28px;padding-left:30px;}
    #q2{background:url(images/q.gif) no-repeat 0px -35px;position:relative;cursor:pointer;width:123px;height:35px;margin:0px; line-height:28px;padding-left:30px;}
    #q3{background:url(images/q.gif) no-repeat 0px -70px;position:relative;cursor:pointer;width:123px;height:35px;margin:0px; line-height:28px;padding-left:30px;}
</style>

<!-- float begin -->
<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function($){
    var s= $('#Qonline').offset().top;$(window).scroll(function (){$("#Qonline").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
    var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
    $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
    $('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
    $('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
    $('#gobuy').click(function(){window.location = 'https://yangjunwei.com';});//也可以是页面中的一个锚点，#buyForm
});
-->
</script>
<div id="Qonline">
    <div id="q1"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" alt="点此进行交流" title="点此进行交流"> 123456</a></div>
    <div id="q2"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin= 123456&site=qq&menu=yes" alt="点此进行交流" title="点此进行交流"> 123456</a></div>
    <div id="q3"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin= 123456&site=qq&menu=yes" alt="点此进行交流" title="点此进行交流"> 123456</a></div>
</div>
<div id="shangxia">
    <div id="shang"></div><div id="gobuy"></div><div id="xia"></div>
</div>
<div id="footer"></div>
<!-- float end -->