使用 scroll-behavior 實現網頁滑動效果
CSS,  HTML

使用 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 帳號註冊

發表迴響