有時候開發(fā)網(wǎng)站前端代碼的時候,需要用到空鏈接,即代碼中<a href=“#”>,這樣用#號的,一般像這種情況是在錨點的時候才會用#號做跳轉(zhuǎn)。

錨點最初作用是當(dāng)網(wǎng)頁太長,而需要使用跳轉(zhuǎn)到各個部分時的代碼,隨著技術(shù)的發(fā)展,像這樣的功能,大多會使用JS動畫的方式控制到某個點,使用最廣范的就是單頁設(shè)計,這種網(wǎng)頁注重動畫效果,如我們設(shè)計開發(fā)的網(wǎng)站煜華科技,以是單頁與多頁相結(jié)合的站點,鏈接為:
http://www.adhesionled.com/index.php
所以隨著技術(shù)的升級,錨點的作用也是越來越小。
但是有時候又非常方便,因為不用什么技術(shù)即可實現(xiàn)跳轉(zhuǎn)到局部點。
然后有的開發(fā)者就會想這種空鏈接用得多了,究竟對SEO有沒影響呢?
按道理來說是沒有影響的,因為搜索引擎只會分析整頁的內(nèi)容,不會按錨點去分析內(nèi)容,還有大部分的HTMl標(biāo)題是會給過濾了的。
但采用這種方式,然后加JS做跳轉(zhuǎn),這樣對SEO影響是有影響的,就是說JS跳轉(zhuǎn)肯定比A鏈接跳轉(zhuǎn)對搜索引擎更不友好。
所以按SEO出發(fā),盡量不要用空鏈接。
分析了對SEO的影響后,再對用戶對空鏈接的操作方面的影響,
如<a href=“#”>,這樣用戶點擊后會返回頂部,如果寫成href="###"這樣的話,就不會有任何動作。
那么超鏈接中 href='#' 和 href='###' 的區(qū)別是什么呢?
簡單地說,
如果想定義一個空的鏈接,又不跳轉(zhuǎn)到頁面頭部,可以寫href="###"。
詳細地說,
'#' 是有特定意義的,如果 '#' 后有內(nèi)容會被認(rèn)為是一個標(biāo)簽而從頁面找到相應(yīng)標(biāo)簽跳轉(zhuǎn)到該處,找不到時會跳到頁首;
'###' 是一個無意義的標(biāo)簽指定,也就是一個 '#' 和不存在的標(biāo)簽 '##' 的組合,頁面中找不到命名為 '##' 的 <a> 時該鏈接就不會發(fā)生跳轉(zhuǎn),也就不會導(dǎo)致執(zhí)行 onclick 中的內(nèi)容時突然發(fā)生頁面跳到頁首的問題;
"###"主要是防頁面跳動。從其他意義來說,只是一種使用者習(xí)慣,如果你愿意,可以隨便找一個跳轉(zhuǎn)不到的標(biāo)簽作為命名。
說白了"###" 就是一個不是錨點的字符串,瀏覽器找不到也不會跳到頁首,原理就是依賴了網(wǎng)頁的報錯機制,找不到就不做處理。以前空鏈接的href屬性通常使用"#"來填充,但當(dāng)頁面出現(xiàn)滾動條時,點擊空鏈接,頁面會跳動到頁首,給人的感覺很不爽。
為什么當(dāng)用"#"填充空鏈接時會出現(xiàn)頁面跳動的現(xiàn)象?
原因是"#"被默認(rèn)為錨點"#top",即跳轉(zhuǎn)到本頁頁首。查找了下資料, 以下為自己嘗試過的3種解決辦法:
1、使用3個#號,<a href="###" onclick="">鏈接</a>。
為什么要用3個呢,不得其解。也沒有查資料了,本來就是一個讓人蛋疼的問題。
試了下使用兩個#,ff和chrome下可以防頁面跳動,IE8下頁面依然跳頁首(其他IE沒有測試,應(yīng)該也會跳動吧)。
3個#,這幾個瀏覽器就都能防頁面跳動了。當(dāng)然你如果不閑麻煩的話,使用4個#、5個#甚至更多#時,頁面跳動現(xiàn)象也可解決。
2、使用javascript:void(0),<a href=" javascript:void(0) " onclick="">鏈接</a>。
這種寫法曾經(jīng)給我留下過深刻的印象,可讓我吃過大苦頭啊。
它在各個瀏覽器下均可正常工作(這里的正常工作,指防止頁面跳動)。但在IE6下它會防止頁面整體刷新(ff、chrome、IE8下不會出現(xiàn)這樣的狀況,其他瀏覽器就不得而知了),所以你的onclick事件中如果有頁面整體刷新這樣的操作時,最好還是不要使用這種寫法了。
當(dāng)時就是因為涉世不深,導(dǎo)致了調(diào)此bug到深夜的痛苦經(jīng)歷,最終是在師傅的指導(dǎo)下解決了此bug。
也許正因為它有防頁面整體刷新的操作,在ajax的交互中用的比較多。至于javascript:void到底是個什么玩意,自己去baidu或google吧。懶得在這貼了。
3、 在onclick事件函數(shù)中使用return false,<a href=" # " onclick="return false">鏈接</a>。沒什么可說的,至于為什么這樣寫可以做到防頁面跳動,自己去探索吧。
介于以上分析原來在各瀏覽器中這個鏈接也是會有各種不同展示效果,這對于普通用戶來說可能會沒什么在意的,但是對于程序員的來說絕對是程序的BUG,不能不去處理啊,所以空鏈接在各個角度分析,能不使用,還是盡量不要使用哦