因为近来在从事web前端开发的工作，所以写的文章也都是关于web这一块。以后将分享算法和web高级编程的内容，很多公司的web前端不够重视，以为是很low-level，给的待遇也很一般，其实，这都是很狭隘的理解。软件开发是一种很谨慎的工作，每一个环节都需要足够的重视。好了，不扯淡。需要扯淡的，点击左边信息栏加群按钮。
今天分享的内容是网页锚点效果，就是在网页滚动到某个位置时，菜单有相应的变化。如图，
就是在滚动时，菜单会有相应的选中效果，点击菜单时，定位到网页内容。
菜单代码：
1 <ul class="menu"> 2 <li><a href="#about-us">关于我们</a></li> 3 <li><a href="#dynamic">动态</a></li> 4 <li><a href="#case">案例</a></li> 5 <li><a href="#service">服务</a></li> 6 <li class="select"><a href="#index">首页</a></li> 7 </ul>
锚点的话就是在网页相应的位置加上id属性，这里是在section标签加的id，就行。重点看js代码：
1 $(window).scroll(function () { 2 3 $('section[id]').each(function(){ 4 var id = $(this).attr('id'); 5 var offsetTop = document.getElementById(id).getBoundingClientRect().top; 6 var offsetBtm = document.getElementById(id).getBoundingClientRect().bottom; 7 8 if(offsetTop < 0 && offsetBtm > 0) { 9 $('.menu li a[href]').parent().removeClass('select'); 10 $('.menu li a[href=#'+id+']').parent().addClass('select'); 11 } 12 }); 13 14 });
上面代码中getBoundingClientRect()的作用的将选取的dom元素作为矩形，其相对的位置是浏览器窗口的大小。.top是dom元素上边距距离浏览器窗口上边的距离，.bottom是dom元素下边距距离窗口上边距的距离。说白了，就是以浏览器左边，上边为基准。还有.left, .right，这个，博友应该明白什么意思了。当上边距小于等于0，且下边距大于0说明该元素在当前浏览器视图中。改变菜单的选中状态。
因为a标签在li里面，而选中状态在li class="select"，所以点击时应该这样写，
1 $('.menu li').click(function(){ 2 window.location = $(this).find('a').attr('href'); 3 $(this).siblings().removeClass('select'); 4 $(this).addClass('select'); 5 });
就是加上window.location，让页面跳转到相应的元素。
好了，这部分不是难点，不做多余解释。原创作品，转载请注明出处：http://zhutty.cnblogs.com