中閥傳媒-官方網(wǎng)站

首先介紹錨點(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í)候救場，保持圖片的滾動(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)大的征兆?。?