Js 滚动条由慢到快返回顶部
时间: 2023-06-24 20:03:35 浏览: 45
可以使用 JavaScript 和 CSS 来实现滚动条由慢到快返回顶部的效果。以下是一个简单的实现方法:
首先在 HTML 中添加一个“返回顶部”的按钮:
```html
<button id="btnTop">返回顶部</button>
```
然后在 CSS 中设置该按钮的样式和位置:
```css
#btnTop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
font-size: 16px;
border: none;
outline: none;
background-color: transparent;
cursor: pointer;
}
```
接下来,在 JavaScript 中监听页面滚动事件,并根据滚动的距离改变按钮的显示状态:
```javascript
window.addEventListener("scroll", function() {
var btnTop = document.getElementById("btnTop");
if (window.pageYOffset > 100) {
btnTop.style.display = "block";
} else {
btnTop.style.display = "none";
}
});
```
最后,使用 JavaScript 实现滚动条由慢到快返回顶部的效果。可以使用 `window.requestAnimationFrame()` 方法来实现平滑滚动的效果。以下是实现代码:
```javascript
var btnTop = document.getElementById("btnTop");
btnTop.addEventListener("click", function() {
var start = window.pageYOffset;
var end = 0;
var duration = 500;
var startTime = null;
function scrollToTop(timestamp) {
if (!startTime) {
startTime = timestamp;
}
var progress = timestamp - startTime;
var scrollY = easeInOutQuad(progress, start, end - start, duration);
window.scrollTo(0, scrollY);
if (progress < duration) {
window.requestAnimationFrame(scrollToTop);
}
}
function easeInOutQuad(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;
}
window.requestAnimationFrame(scrollToTop);
});
```
在这个代码中,`easeInOutQuad()` 函数用于实现缓动效果,这是一个标准的缓动函数,可以实现滚动条由慢到快的效果。在点击“返回顶部”按钮后,使用 `window.requestAnimationFrame()` 方法来平滑滚动到页面顶部。