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