js 平滑滚动到页面最底部
时间: 2023-08-08 20:05:02 浏览: 42
要实现平滑滚动到页面最底部,可以使用 `window.requestAnimationFrame()` 方法和 `window.scrollTo()` 方法结合起来。
以下是示例代码:
```javascript
function smoothScrollToBottom() {
const currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
const distance = scrollHeight - currentPosition;
const duration = 500;
let startTime = null;
function animation(currentTime) {
if (!startTime) {
startTime = currentTime;
}
const timeElapsed = currentTime - startTime;
const scrollTo = easeInOutQuad(timeElapsed, currentPosition, distance, duration);
window.scrollTo(0, scrollTo);
if (timeElapsed < duration) {
requestAnimationFrame(animation);
}
}
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;
};
requestAnimationFrame(animation);
}
```
在这个函数中,我们首先获取当前滚动位置和页面总高度,然后计算滚动距离和持续时间。接下来,我们使用 `requestAnimationFrame()` 方法循环执行动画,每一帧更新滚动位置,直到滚动到底部。
`easeInOutQuad()` 函数是一个缓动函数,它将动画效果变得更加平滑。你可以通过更改缓动函数来改变滚动效果。
最后,你只需要调用 `smoothScrollToBottom()` 函数即可平滑滚动到页面最底部。