CSS頂部滑入效果可以讓網頁看起來更加美觀，讓頁面轉換更加流暢。它可以通過預先定義一些 CSS 樣式，然后利用 JavaScript 代碼來切換這些樣式來完成。

下面是一個示例代碼：

html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.scroll {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
transform: translateY(-100%);
}
.active {
transform: translateY(0);
}

代碼解析：

首先，在 .container 中增加 overflow: hidden 屬性，保證容器內的元素能夠超出容器而不會影響整個頁面布局。接著，在 .scroll 中添加 transition 屬性，這個屬性可以創建一個動畫效果，它可以在指定的時間內平滑地從一種樣式過渡到另一種樣式。再設置一個 transform 屬性，它的值為 translateY(-100%)，代表了滑出效果的初始狀態

最后，當需要觸發滑入效果時，可以通過 JavaScript 代碼來為相應元素添加 .active 樣式。通過這種方式，.scroll 就會從頂部滑入到頁面中。