HTML的錨點(anchor link),只要在標籤中加入屬性id=a,再用連結href=#a
即可用連結的方式跳到頁面上的指定位置

但這效果是畫面直接閃到位置,若要平滑捲動,則需要額外使用jquery或其他javascript的方式達成

如今有個CSS語法亦可達成此效果,不過需新版的firefox或chrome才支援

見支援範圍表,目前除ios safari及opera外,幾乎都支援了
https://caniuse.com/#search=scroll-behavior


如果可以簡單達成,可以不外掛繁重的js語法
只要加一行簡單的css語法,就能讓大部份瀏覽器有平滑效果,何樂而不為

 

直接加到body裡吧

body {
scroll-behavior: smooth;
}

 

打完收工


發表自: 九五二七九五二七
愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機玩到PS4,從386打到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華混到NOVA,從遊戲滾到動漫,從攝影器材爬到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD

覺得讚想推薦或分享嗎?