使用 scroll-behavior 實現網頁滑動效果
在設計網頁的時候，常常會用到，點一個按鈕，就跳到我們想要的網頁位置的功能，但如果只單純用 HTML 的標籤，只能達到一閃的效果，而想要讓它有滾動的視覺特效，通常都是使用 JavaScript 程式語言，但其實只要用 CSS 的 scroll-behavior 也可以達到相同效果，這並不是一個很新的功能，只是當時能夠支援這個功能的瀏覽器不多，今天就來介紹這個 scroll-behavior。
1. 以下有一個 HTML 範本，請將它複製到記事本，並存檔取名叫「index.html」。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>使用 scroll-behavior 實現網頁滑動效果</title>
<style>
#story {
height: 326vh;
}
</style>
</head>
<body>
<div id="story">
<h1>星座故事</h1>
<h2>天蠍座</h2>
<p>
在夏天南方的星空中，有一個星座相當吸引人注目，它成大S型，閃爍著明亮的光芒，那就是天蠍座。<br>
天蠍座的主人翁是法伊頓，是太陽神阿波羅與仙女克里美妮的兒子。他向阿波羅要求想要駕駛太陽車，結果闖下了大禍。<br>
後來眾神派出各種怪物阻止失控的太陽車，其中以赫拉的毒蠍子功勞最大，牠咬住法伊頓的腳踝，然後宙斯才趁機用雷霆將法伊頓擊斃。<br>
於是赫拉的毒蠍子被放上天空，成為耀眼燦爛的天蠍座。
</p>
<p>
文章來源：http://angelcity.idv.tw/world/s36.htm
</p>
</div>
<a href="#top">回到頂端</a>
</body>
</html>存檔好後，打開來試試看按鈕功能，它會一閃回到網頁頂端。
2. 接著，請在 style 標籤裡，加上以下 CSS 語法。
html {
scroll-behavior: smooth;
}存檔後再試一次，會發現網頁會以滾動的方式，回到網頁頂端。
scroll-behavior: smooth; 要寫在 html 裡面。
top 比較特殊，不用在標籤裡設定 id，它會自動回到網頁頂端。
完整 HTML：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>使用 scroll-behavior 實現網頁滑動效果</title>
<style>
html {
scroll-behavior: smooth;
}
#story {
height: 326vh;
}
</style>
</head>
<body>
<div id="story">
<h1>星座故事</h1>
<h2>天蠍座</h2>
<p>
在夏天南方的星空中，有一個星座相當吸引人注目，它成大S型，閃爍著明亮的光芒，那就是天蠍座。<br>
天蠍座的主人翁是法伊頓，是太陽神阿波羅與仙女克里美妮的兒子。他向阿波羅要求想要駕駛太陽車，結果闖下了大禍。<br>
後來眾神派出各種怪物阻止失控的太陽車，其中以赫拉的毒蠍子功勞最大，牠咬住法伊頓的腳踝，然後宙斯才趁機用雷霆將法伊頓擊斃。<br>
於是赫拉的毒蠍子被放上天空，成為耀眼燦爛的天蠍座。
</p>
<p>
文章來源：http://angelcity.idv.tw/world/s36.htm
</p>
</div>
<a href="#top">回到頂端</a>
</body>
</html>HTML 執行範例：
如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝
可以多點幾次喔~~
第一次點讚需使用 Google 或 Facebook 帳號註冊
