HTML頁面滾動效果是網站設計中常用的一種特效。要實現頁面滾動效果，我們需要使用CSS和JavaScript來控制頁面滾動。 首先，我們需要在頁面頭部添加CSS樣式代碼，如下所示：

<style>
body {
overflow-y: scroll;
height: 100%;
}
</style>

上述代碼中，我們設置頁面的高度為100%，并設置垂直方向上的滾動條。這樣就可以實現在頁面超過可見區域時出現滾動條進行滑動了。 接下來，我們使用JavaScript來實現滾動效果。假設我們要創建一個按鈕，點擊后可以平滑地滾動到頁面底部。代碼如下：

<button onclick="scrollToBottom()">滾動到底部</button>
<script>
function scrollToBottom() {
var height = document.body.scrollHeight;
var step = height / 100;
var i = 0;
var scrollInterval = setInterval(function() {
if (i< 100) {
window.scrollBy(0, step);
i++;
} else {
clearInterval(scrollInterval);
}
}, 10);
}
</script>

上述代碼中，我們使用了JavaScript的window對象的scrollBy方法來實現平滑的滾動效果。根據頁面高度的比例，每次滾動一定的高度，直到滾動到頁面底部。 綜上所述，通過設置CSS和JavaScript代碼，我們可以輕松地創建具有滾動效果的HTML頁面。可以根據自己的需求自定義修改滾動樣式和滾動距離，使網站更具特色。