实现hao123返回顶部、游戏等快捷导航

周末没事，实现下hao123返回顶部快捷导航功能，请路过的大神指点！

下面为相关代码：

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/css">
		.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>

JAVASCRIPT依赖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>

效果图：

 

说明：

hao123的快捷导航定位CSS采用left:50%,margin-left:550px;我这里就直接right了。

参考链接：http://www.hao123.com

 

转载请尊重原创，注明出处http://blog.csdn.net/cuew1987，谢谢！