location是javascript里邊管理地址欄的內(nèi)置對象，比如location.href就管理頁面的url，用location.href=url就可以直接將頁面重定向url。而location.hash則可以用來獲取或設(shè)置頁面的標(biāo)簽值。

比如http://domain/#admin的location.hash="#admin"。利用這個屬性值可以做一個非常有意義的事情。

很多人都喜歡收藏網(wǎng)頁，以便於以后的瀏覽。不過對於Ajax頁面來說的話，一般用一個頁面來處理所有的事務(wù)，也就是說，如果你瀏覽到一個Ajax頁面里邊有意思的內(nèi)容，想將它收藏起來，可是地址只有一個呀，下次你打開這個地址，還是得像以往一樣不斷地去點(diǎn)擊網(wǎng)頁，找到你鍾情的那個頁面。另外的話，瀏覽器上的“前進(jìn)”“后退”按鈕也會失效，這於很多習(xí)慣了傳統(tǒng)頁面的用戶來說，是一個很大的使用障礙。

那么，怎么用location.hash來解決這兩個問題呢？其實(shí)一點(diǎn)也不神秘。

比如，我的作者管理系統(tǒng)，主要功能有三個：普通搜索、高級搜索、后臺管理，我分別給它們分配一個hash值：#search、#advsearch、#admin，在頁面初始化的時候，通過window.location.hash來判斷用戶需要訪問的頁面，然后通過javascript來調(diào)整顯示頁面。比如：

復(fù)制代碼 代碼如下:

var hash;

hash=(!window.location.hash)?"#search":window.location.hash;

window.location.hash=hash;

//調(diào)整地址欄地址，使前進(jìn)、后退按鈕能使用

switch(hash){

case "#search":

selectPanel("pnlSearch"); //顯示普通搜索面板

break;

case "#advsearch":

case "#admin":

}

通過window.location.hash=hash這個語句來調(diào)整地址欄的地址，使得瀏覽器里邊的“前進(jìn)”、“后退”按鈕能正常使用(實(shí)質(zhì)上欺騙了瀏覽器)。然后再根據(jù)hash值的不同來顯示不同的面板(用戶可以收藏對應(yīng)的面板了)，這就使得Ajax頁面的瀏覽趨於傳統(tǒng)化了。

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

關(guān)於錨點(diǎn)跳轉(zhuǎn)及jQuery下相關(guān)操作與插件

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

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

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

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

起關(guān)鍵作用的就是鏈接地址后面跟著的#comments，見下圖標(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)的，見下圖：

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

作者介紹>

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

作者介紹>

作者介紹

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

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

1. 關(guān)於”#”

在頁面制作中，”#”這個符號相當(dāng)常見，且具有一定的通用性?；旧?#xff0c;其表示的含義是id選擇符。例如在CSS中#header{}就表示id為header標(biāo)簽的樣式如何如何；在jQuery中，$(“#header”)表示選擇id為header的標(biāo)簽為jQuery對象；同樣的，在頁面的URL中，”#”也可以理解為id選擇符之意，也就是頁面跳轉(zhuǎn)到含URL指向的id的標(biāo)簽處。

例如，我們在瀏覽器地址欄中輸入或是復(fù)制如下URL：http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html#0

由於URL地址末尾帶有”#”標(biāo)識符，這就相當(dāng)於告訴瀏覽器：“哥，小妹要跳了，你要接好我哦！

”。由於”#”后面跟著的是0，所以呢，瀏覽器就會在地址為http://www.zhangxinxu.com/study/201007/anchor-jump-test-1-demo.html的頁面上尋找符合”#0″特點(diǎn)的標(biāo)簽，並執(zhí)行跳轉(zhuǎn)。在此頁面上，有個js動態(tài)創(chuàng)建的漸變背景，從上到下有256個標(biāo)簽，id從0~255，我們看下firebug下的html代碼展示。

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

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

2. 關(guān)於空錨點(diǎn)指向

如果URL中”#”后面跟隨的字符id在文中找不到，那么會如何呢？如果是在當(dāng)前頁面，則頁面沒有跳轉(zhuǎn)，唯一變化的就是URL地址；如果是從其他頁面跳轉(zhuǎn)過來，則頁面頂部顯示，”#”基本上就是聾子的耳朵——擺設(shè)。

您可以狠狠地點(diǎn)擊這里：空錨點(diǎn)頁面跳轉(zhuǎn)測試，這里的錨點(diǎn)標(biāo)示是”#aaa”，但是由於頁面上沒有id為”aaa”的標(biāo)簽或是name為”aaa”的a標(biāo)簽，所以，”#aaa”純粹就是個打醬油的。

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

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

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

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

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

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

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

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

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

HTML部分

平滑跳轉(zhuǎn)到底部：滑到底部

平滑回到頂部：回到頂部鏈接

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)我們再次刷新頁面(F5)的時候，即使此時的URL后面就隨錨點(diǎn)，此錨點(diǎn)也是不起作用的。

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

此時，我們再按下瀏覽器刷新按鈕(或是F5)，可以看到在IE瀏覽器下，頁面依舊頂部顯示，也就是說頁面的錨點(diǎn)(#0)不再起作用了。大多數(shù)情況下，可能對我們的影響不是很大，但是有時候，例如我們在論壇里發(fā)布了一個帖子，發(fā)帖頁面和帖子列表頁面是同一頁面，帖子提交后，我們想把頁面定位到剛發(fā)的帖子處，在IE瀏覽器下就無法通過修改URL加錨點(diǎn)的方式實(shí)現(xiàn)。

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

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

$(function(){

var url = window.location.toString();

var id = url.split("#")[1];

if(id){

var t = $("#"+id).offset().top;

$(window).scrollTop(t);

}

});

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

上面所有提到錨點(diǎn)跳轉(zhuǎn)的發(fā)起要不是頁面的載入，要不就是a標(biāo)簽通過鏈接發(fā)起。其實(shí)我們可以點(diǎn)擊任意標(biāo)簽實(shí)現(xiàn)錨點(diǎn)的跳轉(zhuǎn)的。所以，我就特別寫了個簡單的jQuery插件，以實(shí)現(xià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ù)

參數(shù)

默認(rèn)

解釋

ieFreshFix

true

布爾型，默認(rèn)修復(fù)IE下刷新錨點(diǎn)不起作用的問題

anchorSmooth

true

布爾型，默認(rèn)平滑跳轉(zhuǎn)

anchortag

anchor

字符串，用以綁定id的標(biāo)簽屬性，默認(rèn)是"anchor"，屬於自定義屬性

animateTime

1000

整數(shù)，動畫執(zhí)行的時間，如果anchorSmooth為false，則此參數(shù)無效

插件使用

此插件的方法為：zxxAnchor()。

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

點(diǎn)擊我吧

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

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

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

滑到底部

對於的jQuery代碼如下：

$(".smooth").zxxAnchor({

anchortag: "href"

});

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

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

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

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

總結(jié)

以上是生活随笔為你收集整理的html js什么作用,html錨點的作用和js選項卡錨點跳轉的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。