电竞比分网-中国电竞赛事及体育赛事平台

分享

URL錨點HTML定位技術(shù)機制、應(yīng)用與問題 ? 張鑫旭

 風(fēng)之飛雪 2014-03-14

一、錨點是什么


錨點就等同于火影中的“飛雷神之術(shù)”,我們先看百科中錨點的解釋:


使用命名錨記可以在文檔中設(shè)置標(biāo)記,這些標(biāo)記通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些命名錨記的鏈接,這些鏈接可快速將訪問者帶到指定位置。

創(chuàng)建到命名錨記的鏈接的過程分為兩步。首先,創(chuàng)建命名錨記,然后創(chuàng)建到該命名錨記的鏈接。


再看看“飛雷神之術(shù)”的解釋:


日本動漫《火影忍者》中時空術(shù)的一種,S級。利用標(biāo)記完成空間穿梭。



都是做標(biāo)記,然后快速定位。說不定AB(岸本齊史)也是個網(wǎng)頁制作愛好者哦!


其實,關(guān)于錨點,我3年前就寫過一篇針對性文章:“關(guān)于錨點跳轉(zhuǎn)及jQuery下相關(guān)操作與插件”,不過內(nèi)容略浮躁,都是偏表象、偏基本應(yīng)用層面的東西;這里還是關(guān)于錨點,探討的內(nèi)容可能更深層次一點。


其實web頁面上還有一種定位,稱為“focus定位”,也稱“聚焦定位”,當(dāng)頁面上控件,例如文本框、單復(fù)選框、按鈕等在『可響應(yīng)聚焦?fàn)顟B(tài)』下,通過類似label for或JS ele.focus()觸發(fā)焦點選中狀態(tài)的時候,也會發(fā)生定位。這個以后有機會探討,這里,專注錨點定位。


//zxx: ① 非disabled狀態(tài),同時沒有應(yīng)用visibility:hidden以及display:none等CSS聲明。其中,單純應(yīng)用pointer-events:none的控件元素是可以被focus的,pointer-events:none的作用更多類似完全穿透,而非不可用。


② 我只在Chrome瀏覽器下做過完整測試,至于IE6這些奇葩,按照以往經(jīng)驗,也應(yīng)如此。但IE6的尿性大家都嘗過的,我不100%保證,大家自備照妖鏡。


二、web網(wǎng)頁中錨點定位的觸發(fā)


當(dāng)下,錨點定位的應(yīng)用一般有:

href="#"返回頂部;或者文章較長時候的標(biāo)題索引,類似下面:

錨點與頁面間內(nèi)容快速定位


這類應(yīng)用往往都是通過點擊觸發(fā)的,于是,難免的,我們可能就很簡單地認(rèn)為錨點定位的觸發(fā)是通過點擊事件。


而實際上,這種順勢而然的理解類似于古人理解為太陽繞著地球轉(zhuǎn)一樣,是有失偏頗的。


我個人認(rèn)為,錨點的定位是通過瀏覽器URL地址的hash觸發(fā)的。


hash?


CSSer們可能對hash這個名詞不感冒,hash中文一般翻譯為“哈?!?,為方便記憶,你也可以讀作“拉稀”。Hash是程序中非常重要以及常見的概念,可以實現(xiàn)內(nèi)容的快速查找,這一點跟錨點很類似。


JS中,并沒有專門的hash的說法(雖然object干了類似的活)。但是,有一個地方,確是實打?qū)?、正兒八?jīng)出現(xiàn)了hash!這就是location.hash.


例如,某頁面的URL是:



http://this./is/#hot    // location.hash → #hot


則,location.hash值就是#hot.


這里#hot再URL地址中是有個專有名詞的,叫什么來著? 協(xié)議?主機?域名?路徑?擦,顯然都不對!罷了,大家就叫“哈?!卑?;恩,似乎太生僻了,那叫“拉稀”吧;額,好像又難聽了點,就叫“錨鏈”吧。


畫性大發(fā),畫個抽象派的圖吧。


錨鏈和錨點的基友關(guān)系 張鑫旭-鑫空間-鑫生活


上圖很抽象地暴露了錨鏈和錨點的基友關(guān)系。也就是說,頁面之所以能定位到錨點所在位置,都是因為URL地址中的錨鏈的作用,而不是點擊行為。最好的證據(jù)就是,當(dāng)重新載入帶有錨鏈的頁面時,錨點依然會被定位。


了解錨點定位的觸發(fā)源有助于我們實際應(yīng)用時候問題的規(guī)避等處理。


三、web錨點定位的機制


帷幕漸漸拉來,高潮慢慢到來。


作為頁面制作開發(fā)人員,錨點定位一定都有用過④。然,就跟打飛機一樣,大家都會打,也打得來;但是,可能就沒想過這飛機運動的機制什么,我是不是從中發(fā)現(xiàn)什么,然后開個掛,秒了眾多好友。我想,錨點定位可能也是如此。今天,我就說說我對錨點定位機制的理解。


//zxx: ④ 如果你睜大懵懂的雙眼,楚楚可憐的看著我說,“主啊,我沒用過錨點定位誒”;那么,我請你,去超市買包“炫邁口香糖”,一遍嚼炫邁口香糖,一邊點擊本頁面右下角的返回頂部,直到?jīng)]有味道,或者頁面URL地址后面出現(xiàn)#為止。


1. 錨點定位他丫就是滾床單

錨點定位的機制就是滾床單!


不要邪惡,這里的滾床單就是滾床單,比方說下面的這位狗兄:

狗狗滾床單 滾啊滾


床單即頁面中可滾動的元素,汪星人則是該元素內(nèi)部的的錨點元素,錨點定位就是汪星人滾床單。噢啦!


OK,注意這里的兩個重要條件:

. 元素可滾動;

. 錨點元素在內(nèi)部;


換句話就是無滾動則無定位!此話務(wù)必牢記。


舉個普通的板栗:

舉個栗子


夏天很熱,因為妹子們衣服穿的少,如下HTML:



<img id="hot" src="http://image./image/study/s/s512/mm1.jpg">


于是,當(dāng)含有#hot地址的時候,妹子圖片就會頂著瀏覽器窗口上邊緣顯示了(如果滾動距離足夠,比方說1920寬的顯示器只能滾動一點)。


您可以狠狠地點擊這里:夏天很熱,因為妹子穿的少demo


瀏覽器上邊緣顯示 張鑫旭-鑫空間-鑫生活


之所以美女圖片會瀏覽器窗口頂端顯示,是因為其父元素存在滾動條,可以滾動。


錨點定位的本質(zhì)就是修改容器的滾動高度;如果父容器無滾動,則錨點定位就是失效的命,再舉個有滾動條但不滾動的例子。


您可以狠狠地點擊這里:父容器無滾動錨點定位失效demo


美女圖片的idhot, 如下截圖(img#hot…):

id為hot截圖示意 張鑫旭-鑫空間-鑫生活


URL錨鏈也是#hot, 但是,美女卻沒有被錨上去,而是,傻傻地看著你,看著你……

錨鏈?zhǔn)?hot


為何呢?下面源代碼示意可能會告訴你答案:



body,
html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.container {
    height: 100%;
    overflow: auto;    /* 滾動條來自這里 */
}


目標(biāo)圖片在滾動容器之外 張鑫旭-鑫空間-鑫生活


本demo的滾動實際上是由container這個div產(chǎn)生的,而idhot的這張圖片在container之外,因此,錨點定位圖片是無法上移的,因為圖片父級木有可滾動的容器。


2. 雙滾動條定位機制

我們還可能遇到這樣的情況,即錨點元素有兩個父容器有滾動條,比方說我博客后臺頁面,滾動條的表哥表姐都出現(xiàn)了:

滾動條的兄弟姐妹們


不知有沒有想過這個問題,這種情況下,元素錨點定位,是先改變爺爺?shù)臐L動高度呢還是爸爸的滾動高度呢?小demo可參見這里。


目前,我還沒想出100%證實的實驗方法(因為父親和爺爺?shù)亩ㄎ皇且凰查g完成的,無法通過計算獲知),不過,從理解上,個人認(rèn)為計算是從里面發(fā)起的,原因有兩個:

首先,如果先計算最外容器,可能就會存在一種里外里3次計算的情況。


//zxx: 下面的研究與探討多半沒有實際價值,實用主義派可以繞開干你的活去。


demo頁面的情況,無論內(nèi)外先計算,都是兩次就完成,因為,最后定位的結(jié)果是,圖片上邊緣/內(nèi)滾動容器上邊緣/瀏覽器可視區(qū)域上邊緣三者對齊。換成容易理解的解釋:柯南,毛利蘭,小五郎在死人的時候會聚在一起(錨點定位對齊),假設(shè)嫌疑犯A讓柯南和毛利蘭在一起(內(nèi)滾動定位),嫌疑犯B可以讓毛利蘭和小五郎在一起(外滾動定位)。則無論是嫌疑犯B先行動,還是嫌疑犯B先行動,最后都是三者在一起,都是2步完成。


但是,存在這樣一種情況,錨點元素在滾動容器的負(fù)左上距離處或底部(即無法讓元素滾動到頂部),如下截圖:

錨點元素在內(nèi)部滾動容器的底部


此時,定位的最后結(jié)果不是圖片上邊緣/內(nèi)滾動容器上邊緣/瀏覽器可視區(qū)域上邊緣三者對齊了。而是,圖片上邊緣,內(nèi)部容器的半部分以及瀏覽器可視區(qū)域上邊緣三者對齊。見下:

容器折半對齊


此時,如果外部先計算,則需要3步了——外部滾動條不知道內(nèi)部滾動應(yīng)當(dāng)定位的情況,其只能讓內(nèi)部容器上邊緣和瀏覽器對齊(或干等);內(nèi)部定位;外部發(fā)現(xiàn)位置不是自己所想,再次調(diào)整!


顯然,這種情況,要先內(nèi)部可以確定滾動位置的先偏移,然后在父級容器;


再者,我們滾輪鼠標(biāo)觸發(fā)滾動的時候,總是里面的先滾,滾不動了才滾外部滾動條;雖然有些牽強,但,隱隱中可以感受到那種由內(nèi)而外的調(diào)調(diào)。


再啰嗦點廢話,有人可能會疑問,這誰先計算壓根就沒有研究的意義吧,你研究這個的目的是什么呢?


這個問題乍聽上去沒什么問題?實際上,多少隱射出中國這個大環(huán)境浮躁與功利性的心態(tài)。


作為職業(yè)人,學(xué)習(xí)帶有功利性其實也沒什么不好;商業(yè)需要什么,什么學(xué)習(xí)有商業(yè)價值,我去學(xué)習(xí)之,沒什么不好,大家都需要養(yǎng)家糊口的。但是,要是所有人都這個心態(tài),怕不是什么好現(xiàn)象。


我之所以研究“內(nèi)外滾動誰先計算”,真沒什么目的,我就只是好奇,我就是希望得到一個正確的結(jié)論。私心肯定有,我希望自己在尋找結(jié)論的過程中,獲得一些意外的知識與結(jié)論,通過深入的思考,走在別人未曾走過的道路上;當(dāng)然,也希望得到我想要的結(jié)論,而不關(guān)心是否有價值。即單純的研究心態(tài)。


研究這個東西,本來就不應(yīng)該為了某個目的而去做,否則就是功利性研究,這就是為何中國科研爛到一坨屎的原因之一。牛頓哥哥被蘋果砸,他就是好奇,為何蘋果砸我,于是他去研究,你說他研究蘋果為何往下掉有什么目的嗎?難道要向蘋果報仇?在中國,鮮有人會研究蘋果為何往下掉,可能會有很多人會研究怎么讓蘋果長得像西施一樣好看——有錢賺??!


我覺得我們做技術(shù)研究,大可鄙棄“研究這個有什么價值”這個功利性的思考,喜歡什么,好奇什么,就去研究什么,價值?目的?等研究結(jié)束了,可能會有更深遠的價值。


但話說回來,上頭拿錢給你,肯定不是想讓你搞些無用的研究的。所謂人在江湖漂,哪有不挨刀。每人心中都有自己的一桿秤,該如何做還是自己決定。


3. overflow:hidden下的錨點定位

首先,大家要明確一點,overflow:hiddenoverflow:auto/scroll的差別就在于有沒有那個滾動條。元素overflow:hidden了,里面內(nèi)容高度溢出的時候,滾動依然存在,僅僅滾動條不存在!


下面這種GIF動畫演示了錨點元素如何通過滾動高度的改變定位到滾動容器上邊緣的;該動畫適用于有滾動條以及沒有滾動條的情況。

錨點定位的gif動畫示意 張鑫旭-鑫空間-鑫生活


我這里多次強調(diào)overflow:hidden沒有滾動條這種情況,不是因為今天周五心情好,而是因為一些高級應(yīng)用以及奇怪問題出現(xiàn)(參見后面)都是在overflow:hidden條件下。


正如上面反復(fù)提到,錨點定位本質(zhì)就是滾傳床單。因此,如果元素在滾動容器的左上角區(qū)域及其之外,顯然滾不動,自然也沒有錨點定位的效果!但是,如果元素在滾動容器的右下方及其之外,滾動條就是用來滾動右下溢出內(nèi)容的,因此,這類元素可以被錨點定位。


以上結(jié)論略含糊,后面的例子會讓你清楚我在說什么的。


四、錨點定位機制下的應(yīng)用


錨點定位機制的最經(jīng)典應(yīng)用就是“無JavaScript實現(xiàn)選項卡輪轉(zhuǎn)切換效果”。




1

2

3

4



    1    2    3    4

如果您覺得此頁面上看此效果有干擾(錨點跳來跳去,好討厭哦),可以狠狠地點擊這里:無JavaScript實現(xiàn)的切換效果demo


如果您理解上面那句“錨點定位本質(zhì)就是滾動”的含義,則上面的效果就很好理解了。


點擊下面這個按鈕,把上面容器從overflow:hidden改成overflow:auto,親自滾滾床單,您就會知道怎么回事了(參考上面GIF的定位示意圖)!




overflow:hidden實際上是個障眼法,里面的選項卡列表們因為錨點定位而一個一個滾動到容器上邊緣了,就形成了“選項卡切換”效果。


上面的例子因為是垂直滾動,因此,容器定高了;我們還可以改成水平滾動,讓列表們水平排列,也可以實現(xiàn)類似的效果。


同樣的,圖片列表那種滑來滑去瀏覽的效果,我們也可以借助錨點;當(dāng)然,使用錨點是為了讓JS掛掉時候依然可用。實際,我們要組織錨點默認(rèn)的行為的,因為——這種跳來跳去的效果不是平滑滴。//zxx: 據(jù)我親自測試,Chrome實驗性質(zhì)的平滑滾動并不適用于錨點跳轉(zhuǎn)


五、:target偽類與錨點的配合


在CSS2的時代,錨點的應(yīng)用并不是很廣泛,或者說不被看好與關(guān)注,很大一部分原因在于沒有CSS這個好幫手輔助。CSS3中有個名外:target的偽類選擇器,我跟你們講,這可是個好東西。沒有:target錨點就像30年前的甲魚,送人都沒人要;有個:target,錨點的應(yīng)用開始走上香餑餑之路,潛力與價值立馬彰顯。如果不是還有半壁的IE6-IE8瀏覽器,我一定大力推崇:target偽類與錨點技術(shù)。


好了,吹噓的話語講完了,到底是真是假,舉個例子讓大家明鑒下。我經(jīng)常會去中國天氣官網(wǎng)看4-7天天氣預(yù)報(影響我的釣魚計劃),其中有個“查看未來4-7天天氣”的按鈕(見下圖),其href地址是#, 交互式JS實現(xiàn)的,而且JS在底部加載,且該網(wǎng)站加載速度較慢。于是,差不多頁面呈現(xiàn)的前半分鐘,我點擊這個按鈕都是徒勞的,反而是出觸發(fā)了#的返回頂部功能,更多天氣不出來——非常糟糕的體驗。


其實,要提高體驗很簡單,JS我們保留,HTML和CSS稍作修改,檔次立馬不一樣!


小二,給我上盤demo過來~


好嘞,客官,您可以狠狠地點擊這里::target與錨點元素顯示隱藏效果demo


點擊demo中“查看4-7天天氣”可以瀏覽展開與收起效果,如下gif動畫截圖演示:

查看與收起4-7天天氣預(yù)報演示 張鑫旭-鑫空間-鑫生活


此效果完全HTML+CSS實現(xiàn),JS醬油。此方法與“復(fù)選框顯示隱藏控制法”并稱新時代CSS顯隱技術(shù)兩大神器。


:target偽類可以表示URL錨鏈對應(yīng)的元素被錨中時候的狀態(tài)。例如,點擊“展開…”按鈕后,錨鏈?zhǔn)?code>"#7d",則此時,就可以激活錨點元素:target選擇器,例如:



<div id="7d" class="weatherYubao"></div>



.weatherYubao:target {} /* 我終于執(zhí)行啦! */


:target偽類的顯隱控制比單復(fù)選框要靈活很多,因為其可以不僅可以通過兄弟選擇器控制樣式,還可以使用父子選擇器(如本demo),且推薦使用父子選擇器可以做更多精確的控制(展開與收起的狀態(tài)等)。



.weatherYubao:target #weatherYubao2 {
    display: block;
}
.weatherYubao:target ...


但是,不足也顯而易見,觸發(fā)定位,即頁面的scroll滾動會改變⑤,略影響體驗。但,這只是JS尚未載入完畢的交互體驗增強之法,實際還是要借助JS組織默認(rèn)行為的。因此此技術(shù)大可使用,因為是純JS方法上的改進。


//zxx: ⑤ 如果您有錨鏈改變,但頁面不滾動的方法,歡迎分享


:target偽類選擇器IE9+, 以及其他現(xiàn)代瀏覽器支持。但,這并不影響該技術(shù)的使用,因為是純JS方法上的改進。


六、錨點定位機制產(chǎn)生的問題


好的影視作品是要有波瀾起伏的,到目前為止,展示的都是錨點定位的正面形象,現(xiàn)在,有必要曝光下錨點定位機制對交互實現(xiàn)造成的影響。


根據(jù)上面的介紹,理論上,我們可以借助:target偽類以及CSS3 transition或者animation實現(xiàn)動畫效果。


比方說上面的查看4-7天氣demo,我們再稍作調(diào)整~


小二~

懂的,客官,來了~


客官,您可以狠狠地點擊這里::target偽類與錨點元素的動畫顯隱demo


為展示平滑效果,截了個視頻:


變化很簡單,display:none/block顯隱,改成height值控制的隱藏。



#weatherYubao2 {
    height: 0px;
    overflow: hidden;
    transition: height .35s;
}
.weatherYubao:target #weatherYubao2 {
    height: 300px;
}


喲,不錯哦。那有什么問題呢?


我想實現(xiàn)上面1,2,3,4選項卡從下往上slide動畫效果,可以不?


按照我們常規(guī)實現(xiàn)slide向上相關(guān)的思路,應(yīng)該是從translateY(100%)translateY(0%)的變化,我們來試試~


IE10+以及其他現(xiàn)代瀏覽器下,您可以狠狠地點擊這里:常規(guī)slideup思路下demo


但是,demo頁面的效果很奇怪,點擊那個選項卡,元素上去了,然后就不見了,咋回事?


博主,是你這個demo做的有問題吧?。?/p>

非也非也!還是上面那個demo,我們其他什么都不修改,就把從下往上進入的slide動畫效果改成從上往下,也就是動畫方向從改成。


IE10+以及其他現(xiàn)代瀏覽器下,您可以狠狠地點擊這里:常規(guī)slidedown思路下demo


您會發(fā)現(xiàn):“喲,這里效果挺正常的嘛~~”。


正常的slidedown動畫效果截圖 張鑫旭-鑫空間-鑫生活


真的就translateY(100%)改成translateY(-100%)這一點點的差異(不信諸位可以右鍵源代碼查看),那為何向上效果嗝屁;而向下效果卻是好的呢?


其實我上面已經(jīng)給了答案了,上面曾說過下面這段話:


如果元素在滾動容器的左上角區(qū)域及其之外,顯然滾不動,自然也沒有錨點定位的效果!但是,如果元素在滾動容器的右下方及其之外,滾動條就是用來滾動右下溢出內(nèi)容的,因此,這類元素可以被錨點定位。


slidedown效果是元素從容器的上面往下出現(xiàn),在觸發(fā)錨點定位的時候,這個元素是沒有定位的。但是,slideup是從下面開始,在執(zhí)行CSS的translateY(100%)的一瞬間,實際上一個等高的滾動條已經(jīng)出現(xiàn),錨點定位于是被觸發(fā),元素被上移一個身位;然后slideup動畫觸發(fā),于是,元素跑到了容器之外,不可見了,這就是slideup demo中元素莫名向上的原因。


文字解釋蒼白,看下面的分解示意圖:


如何解決此問題?

很簡單,兩個字:“延時”!


slideup效果是從translateY(100%)translateY(0%),其效果不能準(zhǔn)確呈現(xiàn)的終極原因就是translateY(100%)造成的滾動和錨點定位偏移滾動同一時間出現(xiàn)造成了沖突!


避免這個問題很簡單,我們只要讓動畫效果,尤其code>translateY(100%)的應(yīng)用延時,CSS是可以搞定的。


有必要來一發(fā),您可以狠狠地點擊這里:延時解決slideup和錨點定位沖突demo


您會驚訝地發(fā)現(xiàn),已經(jīng)幾乎完全真實的slideup效果,之前的選項內(nèi)容向上隱藏,新點擊的內(nèi)容從下出現(xiàn)顯示。

動畫過程中的效果截圖 張鑫旭-鑫空間-鑫生活


于是,純CSS實現(xiàn)帶slide動畫效果的選項卡完美呈現(xiàn)。相關(guān)CSS代碼如下(省略私有前綴, .05s表延遲時間):



@keyframes slideupin {
    0% {transform: translateY(100%); }
    100% { transform: translateY(0%);}
}
.list{
    ... position:absolute;
    transform: translateY(-100%);
    transition: transform .35s .05s linear;
}
.list:target {
    z-index: 1;    /* 最上面顯示 */
    transform: translateY(0%);
    animation: slideupin .35s .05s linear forwards;
}


七、未來高端流行技術(shù)之一:錨點技術(shù)


其實,當(dāng)下,錨點技術(shù)就可以在實際項目中大規(guī)模使用了,不過其身份是“CSS效果增強”,即更強的CSS action效果。我們依然保留JS在交互中的主導(dǎo)地位,但是同時完美融合CSS+HTML的錨點技術(shù)——JS只要return falseevent.preventDefault()組織了默認(rèn)行為就不要擔(dān)心CSS會搶占自己的王位。


然,融合與兼顧必然會存在一些細節(jié)上的問題。這些問題即使我現(xiàn)在拿出來講,其實也是秋風(fēng)掃落葉,無人問津,時機很重要。


我一向推薦看問題要面向未來。雖然說,最為錨點技術(shù)最核心的:target偽類目前IE6-IE8瀏覽器不支持,阻礙了其繁榮昌盛。但是,在不久的將來,或許就1~2年時間,新畢業(yè)的小朋友可能就覺得我們這些還拿IE8說事的叔叔阿姨們太凹凸曼了!


凹凸喵


舉個簡單例子。比方說微博這個產(chǎn)品,09年10年出來的,無論是新浪的,還是騰訊的。網(wǎng)頁的效果、圖形化東西等主要是通過圖片增強的,而不是CSS增強;到了當(dāng)下,視網(wǎng)膜等設(shè)備對網(wǎng)頁有個更高的要求,圖片增強的網(wǎng)頁有種鮮花插牛糞的感覺。于是,后面的結(jié)果是——專門做一個獨立的針對移動設(shè)備的版本!


其中要看清兩點:

其一,這些公司大,資源豐富,另開個新項目,尤其是網(wǎng)頁這個短期項目,肥豬身上割塊肉,還是能跑能跳的。但是大多數(shù)公司中小企業(yè),加上國家坑爹的政策,這些企業(yè)活得很辛苦,資金很緊張。你說web項目還不容器上了一段時間,為了iPad瀏覽器效果,又專門搞個移動版本,其中的開發(fā)、推廣等人力成本可想而知,錢就這樣被燒掉了。但是,如果從面向未來的角度做產(chǎn)品,比方說技術(shù)這一塊,以后所節(jié)約的成本可能會相當(dāng)驚人。

其二,這些公司大,但是做事相對不靈活。畢竟用戶基數(shù)大,一個網(wǎng)站從圖片增強改為CSS增強,這個擔(dān)子誰都擔(dān)不起。只能做新的版本。但是,中小企業(yè)不一樣。這些公司產(chǎn)品為了面向未來而作一定的犧牲與舍棄是完全可以,而且應(yīng)該如此。例如嘗試響應(yīng)式布局、或者大量應(yīng)用面向未來的一些技術(shù),比如本文展示的錨點技術(shù),在此基礎(chǔ)上做JS增強。于是,3年后,到了一個新的設(shè)備時代,這個網(wǎng)站尼瑪儼然成為流行之先驅(qū)了。


學(xué)習(xí)馬云,高瞻遠矚,把握未來。


八、結(jié)尾滾床單時間


進入新環(huán)境,需要時間適應(yīng),例如新的時間規(guī)劃安排等,技術(shù)的學(xué)習(xí)與博客更新會慢慢進入正常。擦,突然想起來,忘記探討一個重要的問題了,為何href="#"點擊后,觸發(fā)的效果是回到頁面頂部呢?對于這個問題,您怎么看呢?不妨我們一起探討下(評論、郵件均可)~~


最后再補充兩個小tip:

1. F5刷新不會觸發(fā)錨點定位,在Chrome瀏覽器下,這個過程由三部曲完成:首先,滾動高度為0;其次,錨點定位高度;最后,還原成刷新之前滾動條的滾動高度。您也可以自己F5試試,會看到滾動條明顯的重定位。

2. 連續(xù)按F5,或者說長按F5,則似乎等同于Ctrl+F5, Chrome瀏覽器以及IE瀏覽器都是如此。


好久沒寫東西了,所以可能話癆了點,能靜心讀到這里的朋友們我雙手合一,表示誠摯的感謝!另外,文中有些觀點結(jié)論都是自己感性認(rèn)識,可能存在不準(zhǔn)確之處,歡迎大力指正。


希望本文的內(nèi)容能夠?qū)δ膶W(xué)習(xí)有所幫助。


哦,快12點了,滾床單時間到了……



(本篇完)









               



  

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多