html锚点总结
点击的时候内容区的位置可以自己控制？？？？
html
一.思路1
内容区域一定要给滚动台，然后给滚动条设置宽高为0px,隐藏滚动条，内容的div要给到高度大于屏幕的高度，就可以实现翻页的效果
一.思路2
如果根据html的滚动条来实现，如果想到达自己制定的位置，可以给相应的padding和margin值，或者是各个块内放一个空的div，设置需要的宽高即可；
一.思路3
内容区域可以有两个div，可以让外面一层的div为隐藏并设置滚动条根据此来滚动，里面的div为显示，并且里里面的div的宽高大于外面的就可以遮住了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{height: 100%;overflow: hidden;}
*{padding: 0;margin: 0;}ul,li{list-style: none;}a{text-decoration: none;}
#content{border: 1px solid red;overflow-y:scroll ;height:500px;}
.content{min-height: 500px;}
#content1{background: red;}
#content2{background: yellow;}
#content3{background: green;}
#content4{background: pink;}
#content5{background: blue;}
.box{width: 800px;height: 600px;}
/*.box::-webkit-scrollbar{width:0px;height: 0px;}*/
#top{margin-top: 50px;margin-left: 50px;overflow: hidden;}
#top ul li{float:left;width: 120px;}
#top ul li.active{background: red;}
</style>
<script type="text/javascript" src="../easyui/jquery.min.js" ></script>
</head>
<body>
<div class="box">
<div id="top">
<ul>
<li><a href="#content1">content1</a></li>
<li><a href="#content2">content2</a></li>
<li><a href="#content3">content3</a></li>
<li><a href="#content4">content4</a></li>
<li><a href="#content5">content5</a></li>
</ul>
</div>
<div id="content">
<div id="content1" class="content">
content1content1content1content1content1content1<br />
content1content1content1content1content1content1<br />
content1content1content1content1content1content1<br />
content1content1content1content1content1content1<br />
</div>
<div id="content2" class="content" style="padding-top: 50px;">
content2<br />
content2content2content2content2content2content2<br />
content2content2content2content2<br />
</div>
<div id="content3" class="content">
content3content3content3content3content3content3<br />
content3content3content3content3content3content3<br />
content3content3content3content3content3content3<br />
</div>
<div id="content4" class="content">
content4content4content4content4content4content4<br />
content4content4content4content4content4content4<br />
content4content4content4content4content4content4<br />
content4content4content4content4content4content4<br />
</div>
<div id="content5" class="content">
content5content5content5content5content5content5<br />
content5content5content5content5content5content5<br />
content5content5content5content5content5content5<br />
</div>
</div>
</div>
<script type='text/javascript'>
function clickFun(id,_this){ //以传参的形式进行点击事件，锚点的时候，a标签自带点击事件
var $this = _this;
$($this).attr('href','#'+id);
}
$("#content").on('scroll',function(){
var $scroll = $(this).scrollTop();//垂直滚动条偏移的距离
var height=0;
var content=$(".content");
for(var i=0;i<content.length;i++){
var currentOffsetTop=$(".content").eq(i).height();
if($scroll>height)
{
("#top ul li").removeClass("active");
$("#top ul li").eq(i).addClass("active");//当前的央视
}
height+=currentOffsetTop;//获取区域的总高度与滚轴的垂直距离比较
});
</script>
</body>
</html>
