JS：目录跟随定位效果的实现及锚点中使用name和id定位的区别。

一、目录跟随定位效果
最近在使用百度百科（ http://baike.baidu.com/）的时候，发现了个不错的功能目录跟随定位。也是百度在用户体验方面做的改善。
目录跟随定位：实现的效果就是当滚动屏幕的时候，会根据滚动到相应的位置去给相应的锚点加上高亮得效果。

以下我根据百度的效果写的，原理应该差不多：根据比较【滚动条距离顶部的距离】【每个锚点距离顶部的距离】得到当前滚动条在那个锚点区间，从而高亮当前锚点对应的导航链接。

$(window).scrollTop()：得到滚动条距离顶部的距离。

$(function(){
//返回顶部
$('.home').click(function(){
	$("html,body").animate({scrollTop: 0}, 1000);
	return false;
})
 
//遍历锚点
var mds = $(".maodian")
var arrMd = [];
for(var i = 0, len = mds.length;i<len;i++){
arrMd.push($(mds[i]));
}
 
function update(){
var scrollH = $(window).scrollTop();
for(var i = 0;i<len;i++){
var mdHeight = arrMd[i].offset().top;
if(mdHeight < scrollH){var j = i+1;navon(j);}
}
}
 
//高亮导航菜单
function navon(id){
	$('.main_nav h2,.main_nav h3').removeClass('on');
	$('#p'+id).addClass('on');
}
 
//绑定滚动事件
$(window).bind('scroll',update);
})

二、锚点中使用name和id定位的区别
1）name的局限性，目标元素的ID和Name都可以作为锚点，区别在于ID对于目标元素的类型是无限制的，而name则仅适用于以下元素：A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP
2）大小写敏感，html本身是不区分大小写的,但是对于锚点则区别对待了。经测试在IE下不区分大小写，但是在Firefox、Chrome下均区分大小写。
3）name可以重复di不可重复，但是不管用name还是id做锚点都应该保持其唯一性，虽然经测试重复的name和id都会定位到第一个，但是应该杜绝这样的做法，可能会产生无法预料的问题。
4）id定位存在定位偏移，而name定位很准确。网上虽然有解决id定位偏移的问题，但是如果仅是单作为锚点来言还是建议大家使用name。