仿阿里巴巴右侧楼层导航JS

近来赶项目，天昏地暗，水深火热的。遇到细节问题还真是头疼不已。

页面需要一个右侧的楼层导航，样子和阿里巴巴的右边差不多。具体自己可以看一看。

 

这里整理一下思路代码，有用到的拿去便是。

一开始以为挺简单的，找个jquery插件就能搞定，于是找了个coolcat类似的样子描描画画，分分钟也有几分眉目了，正沉浸于自我炫耀得瑟的情绪中，

悲剧发生了，在 Chrome 和 firefox 下 大范围的跳转会有楼层定位不准确的情况，我去，婶婶也去！

无奈只能自己动手丰衣足食，浪费宝贵的半天时间。因为是比较初的版本，适合有一定技术，有耐心，不骂娘的人看，口水珍贵多包涵。

主要jS代码如下:

jQuery(document).ready(function($) {
	var f1 = $('.slide[data-slide="1"]').offset().top;
	var fs = $('.navigation').children().size();
	var fss = new Array();
	for (i = 0; i < fs; i++) {
		j = i + 1;
		fss[i] = $('.slide[data-slide="' + j + '"]').offset().top;
	}
	
	//if($(window).scrollTop()==0){
	//	changefl(1);
	//}
	
	
	$(window).scroll(function(){
		var currentTOP = $(window).scrollTop();
		if(currentTOP>f1-30){
			$("#skipfloor").show();
		}else{
			$("#skipfloor").hide();
		}
		if (currentTOP <= f1) {
			$('.navigation a').removeClass('sel');
			$('.navigation a[data-slide="1"]').addClass('sel');
			return;
		}else{
			changefl(getFloor(currentTOP));
		}
	});
	
	
	function getFloor(fh){
		if(fs==0||fh<=f1){
			return 1;
		}
		if(fh>=fss[fs-1]){
			return fs;
		}
		for (k=0; k<fs;k++) {
			if(fh>fss[k]&&fh<fss[k+1]){
				return k+1;
			}
		}
	}
	
	function changefl(fno){
		$('.navigation a').removeClass('sel');
		$('.navigation a[data-slide="'+fno+'"]').addClass('sel');
	}
	
});

function gotop() {
	$('body,html').animate({
		scrollTop : 0
	}, 800);
}
function gotofloor(thiz) {
	$("a[class='sel']").attr('class', '');
	$(thiz).attr("class", "sel");
	dataslide = $(thiz).attr('data-slide');
	var pos = $('.slide[data-slide="' + dataslide + '"]').offset().top;// 获取该点到头部的距离
	$("html,body").animate({
		scrollTop : pos
	}, 800);
}

效果：

 

 

=======2014 06 06 更新 =============

询问的人实在太多，不管是处于什么目的，还是简单抽空弄了一个简陋版，拿去用吧，大家斟酌口水，谢谢。

链接: http://pan.baidu.com/s/1pJwizl5 密码: tbqb