CSS 頁面滾動動畫可以增添網頁設計的互動感，讓用戶更加愉悅地瀏覽頁面內容。下面我們來介紹一下如何使用 CSS 來實現頁面滾動動畫。

html{
scroll-behavior:smooth;
}

上述代碼使用了滾動行為屬性 scroll-behavior，設置為 smooth 則表示啟用平滑滾動效果。這個屬性可以設置在整個 html 文檔中，也可以設置在某個具體的元素中。

.scroll-to-top-btn{
position:fixed;
bottom: 5%;
right: 5%;
opacity:0;
transition:opacity .3s ease-in-out;
cursor:pointer;
}
.scroll-to-top-btn:hover{
opacity:1;
}
.scroll-to-top-btn svg{
width:24px;
height:24px;
}
.scroll-to-top{
opacity:0;
visibility:hidden;
transition:opacity .3s ease-in-out, visibility .3s ease-in-out;
cursor:pointer;
}
.scroll-to-top.show{
opacity:1;
visibility:visible;
}
@media (max-width: 1024px){
.scroll-to-top-btn{
right:20px;
bottom:20px;
}
}

上面的代碼是一個“返回頂部”按鈕的樣式代碼。其中用到了 opacity 不透明度和 transition 過渡動畫等 CSS 屬性，實現了按鈕在懸浮狀態和正常狀態下的漸變效果及其位置的調整。

除此之外，我們也可以通過設置 CSS 的 transform 屬性，添加更多精美的滾動動畫效果，例如：

@keyframes fadeInUp{
from{
transform:translateY(30px);
opacity:0;
}
to{
transform:none;
opacity:1;
}
}
.section-title{
animation:fadeInUp .5s ease-in-out forwards;
}

上述代碼是一個標題在頁面滾動時出現的動畫效果，我們定義了一個漸變的從下往上的動畫，使標題具有更好的呈現效果。

總之，CSS 頁面滾動動畫可以讓頁面更有生命力且更具吸引力，在網頁設計中非常實用，請務必掌握好它的用法！