1. 錨點跳轉(zhuǎn)簡介
錨點其實就是可以讓頁面定位到某個位置上的點腹备。在高度較高的頁面中經(jīng)常見到双仍。
錨點跳轉(zhuǎn)有兩種形式：
- a標(biāo)簽 + name / href 屬性
- 使用標(biāo)簽的id屬性
在html 4.0以前竿屹，只有使用 <a> 標(biāo)簽的 name 屬性才能創(chuàng)建片段標(biāo)識符偎球。id 屬性的出現(xiàn)伙单，使所有 HTML 或 XHTML 元素都可以是片段標(biāo)識符胯杭。這是因為 id 標(biāo)識符幾乎可以用在所有的標(biāo)簽中。<a> 標(biāo)簽為了能夠和以前的版本相兼容而保留了 name 屬性膜宋，同時也可以使用 id 屬性窿侈。這些屬性可以相互交換使用，可以把 id 屬性看作是 name 屬性的升級版本秋茫。name 和 id 屬性都可以與 href 屬性結(jié)合起來使用史简，這樣一個 <a> 標(biāo)簽就可以同時作為超鏈接和片段標(biāo)識符使用。
<a href="#he">波輪洗衣機(jī)介紹</a>
<a href="#f"></a>
但是這種方法使用了一個空標(biāo)簽肛著，而且有時候會出現(xiàn)錨點失效圆兵。所以建議采用id來綁定錨點，代碼如下：
<a href="#he">波輪洗衣機(jī)介紹</a><h2 id="#de">波輪洗衣機(jī)介紹</h2>
2. 含錨點跳轉(zhuǎn)的URL地址
window.location.hash
【1】關(guān)于#
在頁面的制作中枢贿，“#”的符號很常見殉农，并且具有通用性【旨裕基本上超凳，其表示的含義是id選擇符。同樣的危队，在頁面的URL中聪建，#也可以理解為id選擇符之意，也就是頁面跳轉(zhuǎn)到含URL指向的id標(biāo)簽處茫陆。
例如輸入一個地址http://baike.baidu.com/view/121414.htm?pf=1#3
這個地址中末尾有個'#'金麸，這個就相當(dāng)于告訴瀏覽器要跳轉(zhuǎn)了，#后面跟著的3表示會在http://baike.baidu.com/view/121416.htm?pf=1的頁面中尋找符合#3特點的標(biāo)簽并且執(zhí)行跳轉(zhuǎn)簿盅。
【2】關(guān)于空錨點指向
如果URL中的#后面跟隨的字符id在文中找不到挥下，就會有兩種情況：如果是在當(dāng)前頁面，除了URL地址變化了桨醋，其他的不會改變棚瘟，頁面不會有跳轉(zhuǎn)；如果是從其他頁面跳轉(zhuǎn)過來喜最，則頁面會在頂部顯示偎蘸，'#'基本就是擺設(shè)。
【3】window.location.hash
用來獲取或設(shè)置頁面的標(biāo)簽值瞬内。http://www.cnblogs.com/nifengs/p/5104763.html
3. Jquery下錨點的平滑跳轉(zhuǎn)迷雪。
如果讓頁面平滑滾動到一個id為box的元素處，則JQuery代碼只要一句話虫蝶，關(guān)鍵位置如下：
$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)
JS原生實現(xiàn)章咧。
scrollTo() 方法可把內(nèi)容滾動到指定的坐標(biāo)。
scrollTo(xpos,ypos);
4. IE下錨點刷新失效及JQuery下的解決
【1】關(guān)于錨點刷新失效
錨點刷新失效就是指當(dāng)按下刷新鍵F5時能真，即使此時URL的后面就隨錨點赁严，此錨點也是不起作用的扰柠。
【2】在Jquery中，不難實現(xiàn)疼约÷钡担可以根據(jù)URL獲取錨點，從而進(jìn)一步獲得對應(yīng)錨點對象忆谓，然后再讓頁面的滾動高度為其距離頁面頂部的偏移值就可以了裆装。使得頁面無論是重新載入還是其刷新，其后面的錨點都起作用倡缠。
$(function() {
var url = window.location.toString();
var id = url.split('#')[1];
if (id) {
var t = $('#' + id).offset().top;
$(window).scrollTop(t);
}
})
