一、錨點(diǎn)跳轉(zhuǎn)簡(jiǎn)介

錨點(diǎn)嘛，業(yè)余點(diǎn)的解釋就是可以讓頁(yè)面定位到某個(gè)位置的點(diǎn)。在高度較高的頁(yè)面中經(jīng)常見(jiàn)到，例如，百度百科頁(yè)面，《火影忍者》這個(gè)詞條，結(jié)果就會(huì)看到如下的錨點(diǎn)列表：

點(diǎn)擊其中一個(gè)鏈接，就會(huì)跳轉(zhuǎn)到頁(yè)面的相應(yīng)位置。這就是錨點(diǎn)的作用之一。錨點(diǎn)還可以用在跳轉(zhuǎn)到其他頁(yè)面的相應(yīng)位置，例如我的博客，點(diǎn)擊博客首頁(yè)文章下面的評(píng)論鏈接，則會(huì)跳轉(zhuǎn)到文章的評(píng)論處。

起關(guān)鍵作用的就是鏈接地址后面跟著的#comments，見(jiàn)下圖標(biāo)示：

我知道的實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)有兩種方式，一種是a標(biāo)簽+name屬性，還有一種就是使用標(biāo)簽的id屬性。百度百科就是使用的a標(biāo)簽的name屬性實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)的，見(jiàn)下圖：

上圖效果更具體點(diǎn)表示是：

<a href="#2">作者介紹></a>            <a name="2"></a>

早在大學(xué)跟某女交往的那會(huì)兒，我就已經(jīng)放棄使用a+name的錨點(diǎn)方法了。一是使用了一個(gè)空標(biāo)簽，有鋪張浪費(fèi)，挪用公款之嫌；二是經(jīng)常會(huì)出現(xiàn)錨點(diǎn)失效的情況。所以，我都是使用id來(lái)綁定錨點(diǎn)的，迄今為止，沒(méi)有出過(guò)什么紕漏。如果使用id實(shí)現(xiàn)，則上圖所示效果對(duì)應(yīng)代碼應(yīng)該類似下面：

<a href="#2">作者介紹></a>            <h2 id="2">作者介紹</h2>

說(shuō)明：本文下面所有錨點(diǎn)內(nèi)容專指id錨點(diǎn)。

二、含錨點(diǎn)跳轉(zhuǎn)的URL地址

1. 關(guān)于”#”
在頁(yè)面制作中，”#”這個(gè)符號(hào)相當(dāng)常見(jiàn)，且具有一定的通用性。基本上，其表示的含義是id選擇符。例如在CSS中#header{}就表示id為header標(biāo)簽的樣式如何如何；在jQuery中，$(“#header”)表示選擇id為header的標(biāo)簽為jQuery對(duì)象；同樣的，在頁(yè)面的URL中，”#”也可以理解為id選擇符之意，也就是頁(yè)面跳轉(zhuǎn)到含URL指向的id的標(biāo)簽處。

例如，我們?cè)跒g覽器地址欄中輸入或是復(fù)制如下URL：http://www./study/201007/anchor-jump-test-1-demo.html#0
由于URL地址末尾帶有”#”標(biāo)識(shí)符，這就相當(dāng)于告訴瀏覽器：“哥，小妹要跳了，你要接好我哦！”。由于”#”后面跟著的是0，所以呢，瀏覽器就會(huì)在地址為http://www./study/201007/anchor-jump-test-1-demo.html的頁(yè)面上尋找符合”#0″特點(diǎn)的標(biāo)簽，并執(zhí)行跳轉(zhuǎn)。在此頁(yè)面上，有個(gè)js動(dòng)態(tài)創(chuàng)建的漸變背景，從上到下有256個(gè)標(biāo)簽，id從0~255，我們看下firebug下的html代碼展示。

所以，這個(gè)頁(yè)面載入后，應(yīng)該立即跳轉(zhuǎn)到漸變背景的頂部。如下圖所示：

您可以狠狠地點(diǎn)擊這里：“#0″錨點(diǎn)的跳轉(zhuǎn)測(cè)試

2. 關(guān)于空錨點(diǎn)指向
如果URL中”#”后面跟隨的字符id在文中找不到，那么會(huì)如何呢？如果是在當(dāng)前頁(yè)面，則頁(yè)面沒(méi)有跳轉(zhuǎn)，唯一變化的就是URL地址；如果是從其他頁(yè)面跳轉(zhuǎn)過(guò)來(lái)，則頁(yè)面頂部顯示，”#”基本上就是聾子的耳朵——擺設(shè)。

再如果，頁(yè)面的URL后面只有一個(gè)孤單的”#”，或是頁(yè)面某鏈接指向單單是個(gè)”#”(<a href=”#”></a>)，則頁(yè)面頂部顯示。所以，一般頁(yè)面的回到頂部效果都是使用一個(gè)孤單的”#”作為錨點(diǎn)鏈接的。例如淘寶網(wǎng)的返回首頁(yè)：

對(duì)應(yīng)的html代碼如下圖所示：

三、jQuery下錨點(diǎn)的平滑跳轉(zhuǎn)

對(duì)于錨點(diǎn)的平滑跳轉(zhuǎn)，我覺(jué)得要謹(jǐn)慎使用，在個(gè)人站點(diǎn)或是這個(gè)效果含有功能提示可以用一用，在一般的商業(yè)性質(zhì)的網(wǎng)站上，權(quán)衡來(lái)講，不用更好，當(dāng)然，這只是我的個(gè)人意見(jiàn)。jQuery庫(kù)已經(jīng)為我們做了很多的工作了，所以，在jQuery下實(shí)現(xiàn)錨點(diǎn)的平滑跳轉(zhuǎn)是簡(jiǎn)單輕松的。例如，我們要讓頁(yè)面平滑滾動(dòng)到一個(gè)id為box的元素處，則jQuery代碼只要一句話，如下：

$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);

其中animate為jQuery自定義動(dòng)畫方法，$(“#box”).offset().top表示id為box的jQuery對(duì)象距離頁(yè)面頂部的偏移值，1000表示平滑動(dòng)畫執(zhí)行的時(shí)間為1000毫秒，也就是1秒。

為了直觀的表示效果，我做個(gè)個(gè)簡(jiǎn)單的demo頁(yè)面。您可以狠狠地點(diǎn)擊這里：錨點(diǎn)平滑跳轉(zhuǎn)demo

點(diǎn)擊下圖所示文字鏈接，就可以看到平滑跳轉(zhuǎn)效果了：

相應(yīng)的代碼如下：

HTML部分
<div id="top" class="append_box mb20">
    平滑跳轉(zhuǎn)到底部：<a href="#bottom" class="smooth">滑到底部</a>
</div>
<div id="appendBox" class="append_box">
    <img width="300" height="3281" src="http://ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" />
</div>
<div id="bottom" class="append_box mb20">
    平滑回到頂部：<a href="#top" class="smooth">回到頂部鏈接</a>
</div>

JS部分
$(".smooth").click(function(){
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000);
    return false;
});

四、IE下錨點(diǎn)刷新失效及jQuery下的解決

1、關(guān)于錨點(diǎn)刷新失效
所謂“錨點(diǎn)刷新失效”指的是當(dāng)我們?cè)俅嗡⑿马?yè)面(F5)的時(shí)候，即使此時(shí)的URL后面就隨錨點(diǎn)，此錨點(diǎn)也是不起作用的。

還是拿最開始的例子演示，，我們?cè)跒g覽器地址欄中輸入或是復(fù)制如下URL：http://www./study/201007/anchor-jump-test-1-demo.html#0，或是點(diǎn)擊這里。我們第一次進(jìn)入這個(gè)頁(yè)面的時(shí)候，錨點(diǎn)是正常的，頁(yè)面定位到漸變背景的頂端。ok，現(xiàn)在，我們把頁(yè)面滾動(dòng)到頂部，如下圖所示：

此時(shí)，我們?cè)侔聪聻g覽器刷新按鈕（或是F5），可以看到在IE瀏覽器下，頁(yè)面依舊頂部顯示，也就是說(shuō)頁(yè)面的錨點(diǎn)(#0)不再起作用了。大多數(shù)情況下，可能對(duì)我們的影響不是很大，但是有時(shí)候，例如我們?cè)谡搲锇l(fā)布了一個(gè)帖子，發(fā)帖頁(yè)面和帖子列表頁(yè)面是同一頁(yè)面，帖子提交后，我們想把頁(yè)面定位到剛發(fā)的帖子處，在IE瀏覽器下就無(wú)法通過(guò)修改URL加錨點(diǎn)的方式實(shí)現(xiàn)。

如果讓IE瀏覽器即使是同一URL刷新也能實(shí)現(xiàn)錨點(diǎn)定位呢？在jQuery下，不難實(shí)現(xiàn)。我們可以根據(jù)URL獲取錨點(diǎn)，從而進(jìn)一步獲得對(duì)應(yīng)的錨點(diǎn)對(duì)象，然后再讓頁(yè)面的滾動(dòng)高度為其距離頁(yè)面頂部的偏移值就可以了。文字?jǐn)⑹鲈倬室膊患皩?shí)例來(lái)的直觀，例如我們要處理一個(gè)鏈接地址為：http://www./study/201007/anchor-jump-test-3-demo.html#0的頁(yè)面，要讓其無(wú)論是重新載入還是當(dāng)前頁(yè)面刷新，其后面的錨點(diǎn)地址”#0″都要起作用。

其js代碼如下，（與頁(yè)面內(nèi)容無(wú)關(guān)）

$(function(){
    var url = window.location.toString();
    var id = url.split("#")[1];
    if(id){
        var t = $("#"+id).offset().top;
        $(window).scrollTop(t);
    }
});

您可以狠狠地點(diǎn)擊這里：IE瀏覽器下刷新錨點(diǎn)失效修復(fù)demo

五、jQuery任意標(biāo)簽錨點(diǎn)跳轉(zhuǎn)插件

上面所有提到錨點(diǎn)跳轉(zhuǎn)的發(fā)起要不是頁(yè)面的載入，要不就是a標(biāo)簽通過(guò)鏈接發(fā)起。其實(shí)我們可以點(diǎn)擊任意標(biāo)簽實(shí)現(xiàn)錨點(diǎn)的跳轉(zhuǎn)的。所以，我就特別寫了個(gè)簡(jiǎn)單的jQuery插件，以實(shí)現(xiàn)任意標(biāo)簽頁(yè)面任意位置的錨點(diǎn)跳轉(zhuǎn)（可平滑）。

demo及下載

您可以狠狠地點(diǎn)擊這里：任意標(biāo)簽錨點(diǎn)跳轉(zhuǎn)demo

您可以狠狠地點(diǎn)擊這里：jquery.anchor.1.0.js 1015字節(jié) [右鍵-目標(biāo)|鏈接另存為]

點(diǎn)擊demo的文字鏈接或是按鈕，均有跳轉(zhuǎn)效果。

參數(shù)

插件使用

此插件的方法為：zxxAnchor()。
插件插件要想使用，需要對(duì)觸發(fā)錨點(diǎn)跳轉(zhuǎn)的標(biāo)簽進(jìn)行一些設(shè)置。在默認(rèn)情況下，要給標(biāo)簽添加一個(gè)自定義的屬性anchor,例如：

<button id="btnTop" type="button" anchor="top">點(diǎn)擊我吧</button>

這里的按鈕就添加了一個(gè)自定義的anchor屬性，屬性值是”top”，表示的意思就是頁(yè)面跳轉(zhuǎn)到id為top的元素處。此時(shí)直接調(diào)用zxxAnchor方法就可以了，如下代碼：

$("#btnTop").zxxAnchor();

當(dāng)然，我們可以不使用默認(rèn)的anchor標(biāo)簽，例如我們可以使用a標(biāo)簽的href屬性，只要在綁定zxxAnchor方法時(shí)修改下參數(shù)就可以了，例如：

<a href="#bottom" class="smooth">滑到底部</a>

對(duì)于的jQuery代碼如下：

$(".smooth").zxxAnchor({
    anchortag: "href"
});

對(duì)照上面的參數(shù)表可知，上面的代碼是設(shè)置綁定錨點(diǎn)對(duì)象的屬性由默認(rèn)的”anchor”改為了”href”。

基本使用就是如此，其他一些參數(shù)您可以參見(jiàn)上面的參數(shù)表，這里不多說(shuō)了。

插件優(yōu)點(diǎn)

支持任意標(biāo)簽，任意位置的錨點(diǎn)跳轉(zhuǎn)，支持平滑效果。同時(shí)不改變頁(yè)面的URL地址。

六、結(jié)語(yǔ)

時(shí)間倉(cāng)促，資歷有限，若有有表述錯(cuò)誤，歡迎指正。就這些。希望能對(duì)有需要的人提供一些幫助。如果您覺(jué)得本文的內(nèi)容對(duì)您的學(xué)習(xí)有所幫助