CSS是現代網站開發中必不可少的技術之一,它被用于讓網站變得更加美觀和互動。而平滑移動技術則是其中非常流行的一種,可以讓網站頁面看起來更加流暢自然。
// 平滑滾動到指定位置 function smoothScroll(target, duration) { var targetElement = document.querySelector(target); var targetPosition = targetElement.offsetTop; var startPosition = window.pageYOffset; var distance = targetPosition - startPosition; var startTime = null; function animation(currentTime) { if (startTime === null) startTime = currentTime; var timeElapsed = currentTime - startTime; var run = ease(timeElapsed, startPosition, distance, duration); window.scrollTo(0, run); if (timeElapsed< duration) requestAnimationFrame(animation); } // 緩動函數 function ease(t, b, c, d) { t /= d / 2; if (t< 1) return c / 2 * t * t + b; t--; return -c / 2 * (t * (t - 2) - 1) + b; } requestAnimationFrame(animation); } // 點擊按鈕平滑滾動到指定位置 var button = document.querySelector('#scroll-to-top'); button.addEventListener('click', function() { smoothScroll('#top', 1000); });
以上是一個簡單的平滑滾動到指定位置的示例代碼。該代碼定義了一個smoothScroll函數,該函數會獲取指定元素的 offsetTop 值,然后使用緩動函數它來平滑滾動到指定位置。在這段代碼中,我們使用了 requestAnimationFrame 方法來調用 animation 函數,該方法可以提供更加流暢的動畫效果。
在調用 smoothScroll 函數之前,需要給按鈕添加一個事件監聽器,當點擊按鈕時,頁面就會自動平滑滾動到指定位置。使用這種平滑滾動方法可以讓網站看起來更加專業和現代化,帶來更好的用戶體驗。