【特效】錨點平滑跳轉和偏移

又是一個關於錨點的問題，其實這個問題我多年之前就遇到過，當時還非常糾結了一番，最後用一段原生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);
});
});

});

源碼下載：http://pan.baidu.com/s/1qXJ3jwo