要实现变速回到顶部的功能，可以使用JavaScript来控制页面的滚动行为，以下是一个简单的示例代码，它使用window.requestAnimationFrame来实现平滑的滚动效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Top</title>
<style>
body {
height: 2000px; /* 使页面有足够的高度以进行滚动 */
}
#scrollToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="scrollToTopBtn">回到顶部</button>
<script>
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
// 显示或隐藏按钮
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
scrollToTopBtn.style.display = 'block';
} else {
scrollToTopBtn.style.display = 'none';
}
});
// 点击按钮时平滑滚动到顶部
scrollToTopBtn.addEventListener('click', () => {
smoothScrollToTop();
});
function smoothScrollToTop() {
const start = window.scrollY;
const duration = 500; // 滚动持续时间（毫秒）
const startTime = performance.now();
function scrollStep(timestamp) {
const elapsed = timestamp startTime;
const progress = Math.min(elapsed / duration, 1); // 确保进度不超过1
const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 2 * t) * t; // 缓动函数
const currentScroll = start * (1 easeInOutQuad(progress));
window.scrollTo(0, currentScroll);
if (progress < 1) {
window.requestAnimationFrame(scrollStep);
}
}
window.requestAnimationFrame(scrollStep);
}
</script>
</body>
</html>解释：
1、HTML部分：创建了一个按钮，当用户滚动页面超过300像素时，该按钮会显示出来。
2、CSS部分：为按钮添加了一些样式，使其固定在页面右下角。
3、JavaScript部分：
window.addEventListener('scroll', ...)：监听滚动事件，根据滚动位置显示或隐藏按钮。
scrollToTopBtn.addEventListener('click', ...)：监听按钮点击事件，调用smoothScrollToTop函数。
smoothScrollToTop函数：使用window.requestAnimationFrame实现平滑滚动，通过计算当前时间与开始时间的差值来确定滚动进度，并使用一个缓动函数（easeInOutQuad）来调整滚动速度，从而实现平滑的滚动效果。
这个示例代码展示了如何通过JavaScript和CSS实现一个简单且平滑的“回到顶部”功能，你可以根据需要进一步调整和优化代码。