360、hao123等一些导航站的右侧返回顶部等快捷导航做法

一些导航站，例如hao123，360导航等在右侧都有个返回顶部等的快捷导航，这个该如何做？看代码：

html部分：

<div id="div_game" class="div_game wh"></div>
 <div id="div_shop" class="div_shop wh"></div>
 <div id="div_life" class="div_life wh"></div>
 <div id="div_video" class="div_video wh"></div>
 <div id="div_relax" class="div_relax wh"></div>
 <div class="shortcut" id="shortcut">
 <a id="J_shortcut_game" class="dib shortcut_game" title="跳转到游戏区块" href="#div_game">
 <span class="span_text">游戏</span>
 </a>
 <a id="J_shortcut_shop" class="dib shortcut_shop" title="跳转到购物区块" href="#div_shop">
 <span class="span_text">购物</span>
 </a>
 <a id="J_shortcut_life" class="dib shortcut_life" title="跳转到生活区块" href="#div_life">
 <span class="span_text">生活</span>
 </a>
 <a id="J_shortcut_video" class="dib shortcut_video" title="跳转到视频区块" href="#div_video">
 <span class="span_text">视频</span>
 </a>
 <a id="J_shortcut_relax" class="dib shortcut_relax" title="跳转到轻松区块" href="#div_relax">
 <span class="span_text">轻松</span>
 </a>
 <a id="J_shortcut_topbottom" class="dib shortcut_bottom" data-value="bottom" title="跳转到页底">
 <span class="span_text">到底部</span>
 </a>
 </div>
 <div id="div_bottom"></div>

CSS部分：

<style type="text/<a href="http://blog.21121.net/tag/css" title="查看更多关于css的文章" target="_blank">css</a>">
		.wh{width:960px;height:400px;margin:0 auto;}
 .div_game{background-color:#f00;}
 .div_shop{background-color:#00f;}
 .div_life{background-color:#f0f;}
 .div_video{background-color:#ff0;}
 .div_relax{background-color:#0f0;}
 .shortcut{background: url(>tizi.png>) repeat-y scroll 5px 0 rgba(0, 0, 0, 0);bottom: 65px;cursor:pointer;display:block;right:20px;position:fixed;width:82px;z-index:20;}
 .shortcut_game,.shortcut_shop,.shortcut_life,.shortcut_video,.shortcut_relax,.shortcut_bottom,.shortcut_top{background: url(>shortcut.png>) no-repeat 0 0 #FFFFFF;border:1px solid #DDDDDD;color:#666666;height: 32px;line-height:34px;margin-top:5px;position:relative;text-decoration:none;width:80px;}
 .shortcut_game {background-position: 15px -167px;margin-top:0;}
 .shortcut_shop {background-position: 15px 10px;}
 .shortcut_life {background-position: 15px -27px;}
 .shortcut_video{background-position: 15px -199px;}
 .shortcut_relax{background-position: 15px -67px;}
 .shortcut_top {background-position: 15px -103px;}
 .shortcut_bottom {background-position: 15px -136px;}
 .shortcut_game:hover,.shortcut_shop:hover,.shortcut_life:hover,.shortcut_video:hover,.shortcut_relax:hover,.shortcut_bottom:hover,.shortcut_top:hover{background-color:#F0FFDD;}
 .span_text { margin-left: 40px;}
 </style>
JS部分（注意：这里主要是通过JQuery来实现的）：
<script type=>text/javascript>>
(function($,doc,win){
 var
 $doc = $(document),
 $win = $(window),
 $shortcut = $(>#shortcut>),
 $topbottom = $(>#J_shortcut_topbottom>),
 timer = null,
 arr = [],
 i = 0,
 ilen = 0,
 _setTopTxt = function(obj){
 obj.attr(>title>,>跳转到页顶>);
 obj.removeClass(>shortcut_bottom>).addClass(>shortcut_top>).attr(>data-value>,>top>).find(>span>).text(>回顶部>);
 },
 _setBottomTxt = function(obj){
 obj.attr(>title>,>跳转到页底>);
 obj.removeClass(>shortcut_top>).addClass(>shortcut_bottom>).attr(>data-value>,>bottom>).find(>span>).text(>到底部>);
 },
 /**
 * [_setDisplay description]
 */
 _setDisplay = function(){
 var
 h = $win.height(),
 st = $doc.scrollTop();
 if(st > h){
 _setTopTxt($topbottom);
 }else{
 _setBottomTxt($topbottom);
 }
 },
 /**
 * [_setScrollTop 返回到某个位置]
 * @param {[type]} flag [>top> or >bottom>]
 */
 _setScrollTop = function(flag){
 var val = 0;
 if(flag == >bottom>){//底部
 val = $doc.height() - $win.height();
 }
 $(>html,body>).animate({ >scrollTop>: val}, 800);
 };
 //绑定事件
 $shortcut.delegate(>a>,>hover>,function(event){
 var
 id = this.id,
 $this = $(this),
 type = event.type,
 animateLeft = function(){
 var data_value = $this.attr(>data-value>);
 if(data_value == >top>){
 arr = [-73,-161,-249,-103];
 }else if(data_value == >bottom>){
 arr = [-73,-161,-249,-136];
 }
 $this.css(>background-position>,arr[i]+>px >+arr[ilen -1]+>px>);
 i ++ ;
 if(i == ilen-1){
 i = 0;
 }
 timer = setTimeout(animateLeft,250);
 };
 if(type == >mouseenter>){
 switch(id){
 case >J_shortcut_game> :
 arr = [-71,-159,-247,-167];
 break;
 case >J_shortcut_relax> :
 arr = [-72,-160,-248,-67];
 break;
 case >J_shortcut_shop> :
 arr = [-71,-159,-247,-335,10];
 break;
 case >J_shortcut_life> :
 arr = [-71,-159,-247,-335,-27];
 break;
 case >J_shortcut_video> :
 arr = [-71,-159,-247,-335,-407,-199];
 break;
 }
 i = 0;
 ilen = arr.length;
 animateLeft();
 }else if(type == >mouseleave>){
 $this.attr(>style>,>>);
 clearTimeout(timer);
 }
 });
 //返回顶部绑定事件
 $topbottom.bind(>click>,function(){
 var
 $this = $(this),
 data_value = $this.attr(>data-value>);
 _setScrollTop(data_value);
 if(data_value == >top>){
 _setTopTxt($this);
 }else{
 _setBottomTxt($this);
 }
 });
 //绑定滚动事件
 $(win).scroll(function(e){
 _setDisplay();
 });

})(jQuery,document,window);

</script>