锚点联动 - 爱码网

什么是锚点联动？
1、锚点定位：点击导航栏nav，定位到content里的不同div
2、锚点反向联动：滚动content，根据当前显示的div定位到相应的nav

解决方法：
1、锚点定位：
方法一：a标签自带锚点属性

<!--点击a标签，根据href定位到id为a2的div处-->
<a href="#a2">2</a>
<div id="a2">2</div>

方法二：想让锚点定位后，给相应nav加突显样式，js控制标签的class名

<a href="#a1" class="on">1</a>
<a href="#a2">2</a>
<script>
$(function(){	
	$('a').click(function(){
		$(' a').removeClass("on");
		$(this).addClass("on");
	});
});
</script>

这样，在CSS中可以利用.current添加样式

2、锚点反向联动
基于上面方法二，js获取滚动条离顶部的距离，js获取div离content顶部的距离，若某个div离顶部距离<=滚动条当前离顶部距离，则定位到相应的nav
锚点联动
顺带提到jQuery中position()与offset()区别：

1、position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。

2、offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。

（用的时候要注意用哪个去获取距离更好）