如何解决window.scrollTo当页面滚动条不在最上方时,点击后先立刻回到顶部再滚动到指定位置的问题
时间: 2023-02-22 19:36:50 浏览: 196
如果想在使用 `window.scrollTo` 方法时,解决页面滚动条先回到顶部再滚动到指定位置的问题,可以使用以下方法:
1. 使用 JavaScript 计算出当前页面滚动条的位置,然后计算出滚动的总距离,最后通过动画的方式实现滚动,从而避免回到顶部的现象。
2. 使用替代方案,例如:`scrollIntoView` 或 `scrollBy`。
例如:
```
// 获取当前滚动条位置
var currentScrollPosition = window.pageYOffset;
// 计算滚动总距离
var scrollDistance = targetPosition - currentScrollPosition;
// 指定动画时间
var scrollDuration = 1000;
// 计算每一帧的滚动距离
var scrollStep = scrollDistance / (scrollDuration / 16);
// 定义滚动动画
function scrollAnimation() {
// 计算当前滚动条位置
currentScrollPosition = window.pageYOffset;
// 如果当前位置已经滚动到目标位置,停止动画
if (currentScrollPosition >= targetPosition) {
clearInterval(scrollInterval);
return;
}
// 滚动指定距离
window.scrollBy(0, scrollStep);
}
// 开始滚动动画
var scrollInterval = setInterval(scrollAnimation, 16);
```
阅读全文