首先介紹錨點定位的幾種常見方法:
(1)id定位 ,使用id + #id跳轉(zhuǎn),可以實現(xiàn)將錨點元素綁定到任意元素上
(2)name定位 , 只能針對a標(biāo)簽來定位,對其他標(biāo)簽不能起到定位作用。
(3)萬能的js定位,獲取元素位置,使用scrollInToView(); //準(zhǔn)確的說,這種方法不屬于錨點定位
不管是上述方法中的哪種方法,當(dāng)頁面(準(zhǔn)確的說應(yīng)該是父元素)的滾動條沒有或不足時,不發(fā)生任何滾動或滾動底部。
由于js的萬能性,此處不予討論;以下討論錨點定位的實現(xiàn):
錨點定位的本質(zhì)是: 修改容器的滾動高度; 也就說父容器無滾動,則錨點定位就會失效。
錨點的應(yīng)用:
1.與overflow:hidden結(jié)合,實現(xiàn):無js完全用css實現(xiàn)選項卡輪轉(zhuǎn)切換效果 (這種效果,可以在js掛掉的時候救場,保持圖片的滾動功能)
注:overflow:hidden就是隱藏超出的部分,不出現(xiàn)滾動條;
css3中的:target偽類 + 錨點
URL 帶有后面跟有錨名稱 #,指向文檔內(nèi)某個具體的元素。這個被鏈接的元素就是目標(biāo)元素(target element)。
2.:target 選擇器可用于選取當(dāng)前活動的目標(biāo)元素,改變樣式;
如果頁面足夠高的話,會有樣式的改變 同時伴隨著 頁面的滾動。
(偽類的:target的支持情況是:IE6-8是不支持的,其余都支持!未來css強大的征兆!)