jquery 模拟a标签跳转锚点 jquery锚点平滑跳转

又是一个关于锚点的问题，其实这个问题我多年以前就遇到过，当时还很是纠结了一番，最后用一段原生js代码解决的，貌似后来还找到一个插件。今天又遇到了同样的问题，发现以前写的一套代码不管用了，原来是jquery库版本的问题，不支持jquery-1.12.1版本。于是，再找其他解决办法，最后，实现的代码简直简单到爆啊。不禁想，代码写的多了吧，就容易想的多，有时越是简单的问题，越会复杂化，甚至都不会解决了。所以，代码这种东西，还是需要每天练习的，形成一种思维，有自己的一套思想，或者也可称为感觉，灵感。哈哈，没想到写了这么多前传。

是怎么样的效果呢，就是页面中有两个导航，类似这样的

最上方当然是网站的总导航，其定位是fixed。在页面中段，有一个二级的导航，是一系列锚点的链接，锚点指向的内容就在本页面中，点击相应锚点跳转到相应内容。页面滚动，当二级导航滚动到总导航下方时，其固定在总导航下方不动。

如果不写js，添加原生态的锚点，那么，相应内容就会滚到屏幕的最顶端，从而被两个导航盖住。这当然不是想要的效果，我们要的是相应内容处于二级导航的下方。

于是，用js获取锚点对应内容相对于文档的偏移，然后让文档滚动到这个偏移量减去两个导航的高度。

 

相应代码如下：
html:
<div class="top">网站总导航</div>
 <div class="con">内容</div>
 <div class="nav">
 <div>
 <a href="#nav1">锚点1</a>
 <a href="#nav2">锚点2</a>
 <a href="#nav3">锚点3</a>
 <a href="#nav4">锚点4</a>
 <a href="#nav5">锚点5</a>
 </div> 
 </div> 
 <ul class="box">
 <li id="nav1">内容1</li>
 <li id="nav2">内容2</li>
 <li id="nav3">内容3</li>
 <li id="nav4">内容4</li>
 <li id="nav5">内容5</li>
 </ul> css:
*{margin: 0;padding: 0;}
.top{height: 100px;background:#CFC;width: 100%;position: fixed;top: 0;line-height: 100px;text-align: center;}
.con{height: 300px;padding-top: 200px;text-align: center;}
.nav{width: 100%;background: #FCC;height: 100px;}
.nav > div{width: 1000px;margin: 0 auto;}
.nav a{float: left;width: 200px;text-align: center;line-height: 100px;}
.box{list-style: none;}
.box li{height: 500px;border-bottom: 1px solid #ccc;text-align: center;}js:
$(document).ready(function(){ 
 var h1=$(".top").height(); //总导航高度

 var con=$(".con"); 
 var h2=con.height(); //总导航和锚点中间内容的高度

 var nav=$(".nav"); 
 var h3=nav.height(); //锚点导航所在层的高度

 var anchor=$(".nav a"); //获取锚点 

 //锚点导航滚动到上方时固定
 $(window).scroll(function(){
 var h=$(this).scrollTop();
 if(h>=(h1+h2)){
 nav.css({"position":"fixed","top":h1}); 
 con.css({"margin-top":h1});
 }
 else{
 nav.css({"position":"relative","top":"0"}); 
 con.css({"margin-top":"0"});
 }
 });  //锚点平滑跳转和偏移
 anchor.each(function(){
 $(this).click(function(){
 var href=$(this).attr("href");
 var pos=$(href).offset().top; 
 $("html,body").animate({scrollTop: pos-h1-h3},500); 
 });
 }); 

});