【特效】锚点平滑跳转和偏移
又是一个关于锚点的问题，其实这个问题我多年以前就遇到过，当时还很是纠结了一番，最后用一段原生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);
});
});
});
