CSS 錨點頁面切換
在網頁設計中,錨點應用越來越廣泛。利用錨點可以實現在同一頁面內實現局部跳轉,提高用戶體驗。 CSS 錨點頁面切換,是通過CSS技術實現的一種錨點跳轉方式。
首先,在HTML中要插入錨點,在需要設置錨點的位置增加一個id屬性,如下所示:
然后,需要在導航菜單中設置目標錨點,如下所示:此時,點擊導航菜單中的鏈接,頁面會出現平滑滾動的效果,因為錨點內部鏈接已默認包含了一個平滑過渡效果,不需要另外添加處理。 但是,這種方法的滾動速度有時過慢,需要用CSS來加強效果。 找到要跳轉到的目標位置,給其添加一個標記class。第一部分內容
第二部分內容
在CSS中設置滾動速度。第一部分內容
第二部分內容
.target { scroll-behavior: smooth; }以上就是 CSS 錨點頁面切換的實現方式。值得注意的是,這種方式并不支持 IE 等老舊瀏覽器,但也不影響其在現代瀏覽器中的廣泛應用。