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