CSS指向上動效是一種常用的頁面交互效果，通過讓元素在垂直方向上向上移動一定距離，增強頁面的交互性和視覺效果，從而提高用戶體驗。

.scroll-up {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-out;
}
.scroll-up.active {
opacity: 1;
visibility: visible;
transform: translateY(-50px);
}

在上述代碼中，我們先定義了一個基本樣式.scroll-up，設(shè)置了元素的定位、透明度、層級等基本屬性。然后通過.active類來添加動態(tài)效果。當該類被添加到元素上時，元素的透明度變?yōu)?，可見性變?yōu)関isible，同時通過transform屬性實現(xiàn)元素的向上移動。

接著是JavaScript代碼，用來監(jiān)聽頁面滾動事件并動態(tài)添加/移除.active類

window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
var scrollUp = document.querySelector('.scroll-up');
if (scrollPosition > 100) {
scrollUp.classList.add('active');
} else {
scrollUp.classList.remove('active');
}
});

在上述代碼中，我們使用addEventListener方法監(jiān)聽窗口的滾動事件，當滾動到一定距離后，使用querySelector方法獲取到.scroll-up元素并添加active類；當滾動距離不足時，則移除active類。

通過上述CSS和JavaScript代碼的配合，就讓我們的網(wǎng)頁擁有了一個簡單而實用的指向上動效。