html錨點的做用和js選項卡錨點跳轉的使用

location是javascript裏邊管理地址欄的內置對象，好比location.href就管理頁面的url，用location.href=url就能夠直接將頁面重定向url。而location.hash則能夠用來獲取或設置頁面的標籤值。

 

好比http://domain/#admin的location.hash="#admin"。利用這個屬性值能夠作一個很是有意義的事情。
很 多人都喜歡收藏網頁，以便於之後的瀏覽。不過對於Ajax頁面來講的話，通常用一個頁面來處理全部的事務，也就是說，若是你瀏覽到一個Ajax頁面裏邊有 意思的內容，想將它收藏起來，但是地址只有一個呀，下次你打開這個地址，仍是得像以往同樣不斷地去點擊網頁，找到你鍾情的那個頁面。另外的話，瀏覽器上的 「前進」「後退」按鈕也會失效，這於不少習慣了傳統頁面的用戶來講，是一個很大的使用障礙。
那麼，怎麼用location.hash來解決這兩個問題呢？其實一點也不神祕。
比 如，個人做者管理系統，主要功能有三個：普通搜索、高級搜索、後臺管理，我分別給它們分配一個hash 值：#search、#advsearch、#admin，在頁面初始化的時候，經過window.location.hash來判斷用戶須要訪問的頁 面，而後經過javascript來調整顯示頁面。好比：

複製代碼 代碼以下:

var hash;
hash=(!window.location.hash)?"#search":window.location.hash;
window.location.hash=hash;
//調整地址欄地址，使前進、後退按鈕能使用
switch(hash){
case "#search":
selectPanel("pnlSearch"); //顯示普通搜索面板
break;
case "#advsearch":
case "#admin":
}

通 過window.location.hash=hash這個語句來調整地址欄的地址，使得瀏覽器裏邊的「前進」、「後退」按鈕能正常使用（實質上欺騙了瀏 覽器）。而後再根據hash值的不一樣來顯示不一樣的面板（用戶能夠收藏對應的面板了），這就使得Ajax頁面的瀏覽趨於傳統化了。

 

-------------------------------------------------------------------------------------------------------------------------------------------------------

關於錨點跳轉及jQuery下相關操做與插件

這篇文章發佈於 2010年07月15日，星期四，20:47，歸類於 jquery相關。 閱讀 79427 次, 今日 44 次

1、錨點跳轉簡介

錨點嘛，業餘點的解釋就是可讓頁面定位到某個位置的點。在高度較高的頁面中常常見到，例如，百度百科頁面，《火影忍者》這個詞條，結果就會看到以下的錨點列表：

點擊其中一個連接，就會跳轉到頁面的相應位置。這就是錨點的做用之一。錨點還能夠用在跳轉到其餘頁面的相應位置，例如個人博客，點擊博客首頁文章下面的評論連接，則會跳轉到文章的評論處。

起關鍵做用的就是連接地址後面跟着的#comments，見下圖標示：

我知道的實現錨點跳轉有兩種方式，一種是a標籤+name屬性，還有一種就是使用標籤的id屬性。百度百科就是使用的a標籤的name屬性實現錨點跳轉的，見下圖：

上圖效果更具體點表示是：

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

早在大學跟某女交往的那會兒，我就已經放棄使用a+name的錨點方法了。一是使用了一個空標籤，有鋪張浪費，挪用公款之嫌；二是常常會出現錨點失 效的狀況。因此，我都是使用id來綁定錨點的，迄今爲止，沒有出過什麼紕漏。若是使用id實現，則上圖所示效果對應代碼應該相似下面：

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

說明：本文下面全部錨點內容專指id錨點。

2、含錨點跳轉的URL地址

1. 關於」#」
在頁面製做中，」#」這個符號至關常見，且具備必定的通用性。基本上，其表示的含義是 id選擇符。例如在CSS中#header{}就表示id爲header標籤的樣式如何如何；在jQuery中，$(「#header」)表示選擇id爲 header的標籤爲jQuery對象；一樣的，在頁面的URL中，」#」也能夠理解爲id選擇符之意，也就是頁面跳轉到含URL指向的id的標籤處。

例如，咱們在瀏覽器地址欄中輸入或是複製以下URL：http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html#0
因爲URL地址末尾帶有」#」標識符，這就至關於告訴瀏覽器：「哥，小妹要跳了，你要接好我哦！」。 因爲」#」後面跟着的是0，因此呢，瀏覽器就會在地址爲http://www.zhangxinxu.com/study/201007/anchor- jump-test-1-demo.html的頁面上尋找符合」#0″特色的標籤，並執行跳轉。在此頁面上，有個js動態建立的漸變背景，從上到下有 256個標籤，id從0~255，咱們看下firebug下的html代碼展現。

因此，這個頁面載入後，應該當即跳轉到漸變背景的頂部。以下圖所示：

您能夠狠狠地點擊這裏：「#0″錨點的跳轉測試

2. 關於空錨點指向
若是URL中」#」後面跟隨的字符id在文中找不到，那麼會如何呢？若是是在當前頁面，則頁面沒有跳轉，惟一變化的就是URL地址；若是是從其餘頁面跳轉過來，則頁面頂部顯示，」#」基本上就是聾子的耳朵——擺設。

您能夠狠狠地點擊這裏： 空錨點頁面跳轉測試，這裏的錨點標示是」#aaa」，可是因爲頁面上沒有id爲」aaa」的標籤或是name爲」aaa」的a標籤，因此，」#aaa」純粹就是個打醬油的。

再若是，頁面的URL後面只有一個孤單的」#」，或是頁面某連接指向單單是個」#」(<a href=」#」></a>)，則頁面頂部顯示。因此，通常頁面的回到頂部效果都是使用一個孤單的」#」做爲錨點連接的。例如淘寶網的返回首頁：

對應的html代碼以下圖所示：

3、jQuery下錨點的平滑跳轉

對於錨點的平滑跳轉，我以爲要謹慎使用，在我的站點或是這個效果含有功能提示能夠用一用，在通常的商業性質的網站上，權衡來說，不用更好，固然，這 只是個人我的意見。jQuery庫已經爲咱們作了不少的工做了，因此，在jQuery下實現錨點的平滑跳轉是簡單輕鬆的。例如，咱們要讓頁面平滑滾動到一 個id爲box的元素處，則jQuery代碼只要一句話，以下：

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

其中animate爲jQuery自定義動畫方法，$(「#box」).offset().top表示id爲box的jQuery對象距離頁面頂部的偏移值，1000表示平滑動畫執行的時間爲1000毫秒，也就是1秒。

爲了直觀的表示效果，我作個個簡單的demo頁面。您能夠狠狠地點擊這裏：錨點平滑跳轉demo

點擊下圖所示文字連接，就能夠看到平滑跳轉效果了：

相應的代碼以下：

HTML部分

<div id="top" class="append_box mb20">
    平滑跳轉到底部：<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;
});

4、IE下錨點刷新失效及jQuery下的解決

一、關於錨點刷新失效
所謂「錨點刷新失效」指的是當咱們再次刷新頁面(F5)的時候，即便此時的URL後面就隨錨點，此錨點也是不起做用的。

仍是拿最開始的例子演示，，咱們在瀏覽器地址欄中輸入或是複製以下URL：http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html#0，或是點擊這裏。咱們第一次進入這個頁面的時候，錨點是正常的，頁面定位到漸變背景的頂端。ok，如今，咱們把頁面滾動到頂部，以下圖所示：

此時，咱們再按下瀏覽器刷新按鈕（或是F5），能夠看到在IE瀏覽器下，頁面依舊頂部顯示，也就是說頁面的錨點(#0)再也不起做用了。大多數狀況下，可能對咱們的影響不是很大，可是有時候，例如咱們在論壇裏發佈了一個帖子，發帖頁面和帖子列表頁面是同一頁面，帖子提交後，咱們想把頁面定位到剛發的帖子處，在IE瀏覽器下就沒法經過修改URL加錨點的方式實現。

若是讓IE瀏覽器即便是同一URL刷新也能實現錨點定位呢？在jQuery下，不難實現。咱們能夠根據URL獲取錨點，從而進一步得到對應的錨點對象，而後再讓頁面的滾動高度爲其距離頁面頂部的偏移值就能夠了。文字敘述再精彩也不及實例來的直觀，例如咱們要處理一個連接地址爲：http://www.zhangxinxu.com/study/201007/anchor-jump-test-3-demo.html#0的頁面，要讓其不管是從新載入仍是當前頁面刷新，其後面的錨點地址」#0″都要起做用。

其js代碼以下，（與頁面內容無關）

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

您能夠狠狠地點擊這裏：IE瀏覽器下刷新錨點失效修復demo

5、jQuery任意標籤錨點跳轉插件

上面全部提到錨點跳轉的發起要不是頁面的載入，要不就是a標籤經過連接發起。其實咱們能夠點擊任意標籤實現錨點的跳轉的。因此，我就特別寫了個簡單的jQuery插件，以實現任意標籤頁面任意位置的錨點跳轉（可平滑）。

demo及下載

您能夠狠狠地點擊這裏：任意標籤錨點跳轉demo

您能夠狠狠地點擊這裏：jquery.anchor.1.0.js 1015字節 [右鍵-目標|連接另存爲]

點擊demo的文字連接或是按鈕，均有跳轉效果。

參數

參數	默認	解釋
ieFreshFix	true	布爾型，默認修復IE下刷新錨點不起做用的問題
anchorSmooth	true	布爾型，默認平滑跳轉
anchortag	anchor	字符串，用以綁定id的標籤屬性，默認是"anchor"，屬於自定義屬性
animateTime	1000	整數，動畫執行的時間，若是anchorSmooth爲false，則此參數無效

插件使用

此插件的方法爲：zxxAnchor()。
插件插件要想使用，須要對觸發錨點跳轉的標籤進行一些設置。在默認狀況下，要給標籤添加一個自定義的屬性anchor,例如：

<button id="btnTop" type="button" anchor="top">點擊我吧</button>

這裏的按鈕就添加了一個自定義的anchor屬性，屬性值是」top」，表示的意思就是頁面跳轉到id爲top的元素處。此時直接調用zxxAnchor方法就能夠了，以下代碼：

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

固然，咱們能夠不使用默認的anchor標籤，例如咱們可使用a標籤的href屬性，只要在綁定zxxAnchor方法時修改下參數就能夠了，例如：

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

對於的jQuery代碼以下：

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

對照上面的參數表可知，上面的代碼是設置綁定錨點對象的屬性由默認的」anchor」改成了」href」。

基本使用就是如此，其餘一些參數您能夠參見上面的參數表，這裏很少說了。

插件優勢

支持任意標籤，任意位置的錨點跳轉，支持平滑效果。同時不改變頁面的URL地址。