JS用于平滑滚动到页面底部。

15 浏览
0 Comments

JS用于平滑滚动到页面底部。

我有一个JS代码，可以实现从页面底部平滑滚动到顶部，它是这样工作的：\n

$("a[href='#top']").click(function() {
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return true;
});

\n但现在我想实现从顶部到底部的平滑滚动，我尝试了以下代码：\n

$("a[href='#footer']").click(function() {
    $("html, body").animate({ scrollToBottom: 0 }, "slow");
    return true;
});

\n但它不起作用，无法实现平滑滚动。有人知道是什么问题吗？

0

3 答案

0 Comments

问题的出现原因：

在页面滚动到底部时，需要设置y轴的位置为document.scrollingElement.scrollHeight。为了实现平滑的滚动效果，在一定的时间内，可以使用window.requestAnimationFrame计算适当的当前位置。当不支持requestAnimationFrame时，可以使用setTimeout实现类似的效果。

解决方法：

可以使用以下代码实现平滑滚动到页面底部的效果：

/*
    pos: the y-position to scroll to (in pixels)
    time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

然后，可以通过以下代码将按钮的点击事件与平滑滚动函数关联起来：

document.querySelector('button').addEventListener('click', function(e){
  scrollToSmoothly(document.scrollingElement.scrollHeight, 1000);
});

这样，当点击按钮时，页面将平滑滚动到底部。为了测试该效果，可以使用以下HTML和CSS代码：

html, body {
  height: 5000px;
}

另外，还可以使用SmoothScroll.js库来实现更复杂的滚动效果，例如垂直和水平平滑滚动、在其他容器元素内滚动、不同的缓动行为、相对于当前位置的滚动等。可以通过以下代码引入该库并使用它：

smoothScroll({yPos: 'end', duration: 1000});


document.querySelector('button').addEventListener('click', function(e){
  smoothScroll({yPos: 'end', duration: 1000});
});

同时，需要在HTML和CSS中添加以下代码：

html, body {
  height: 5000px;
}

这样就可以使用SmoothScroll.js库实现平滑滚动到页面底部的效果。

0
0 Comments

在页面中实现平滑滚动到页面底部的效果，可以使用以下代码来实现：

$("html, body").animate({ scrollTop: document.body.scrollHeight }, "slow");

这段代码通过使用jQuery库中的`animate()`方法，将页面的滚动条平滑地滚动到页面底部。

但如果不想使用jQuery库，也可以通过原生JavaScript来实现。可以参考以下链接中的回答，其中提供了一种跨浏览器的纯JavaScript实现滚动到顶部动画的方法：

[stackoverflow.com/questions/8917921](https://stackoverflow.com/questions/8917921)

0
0 Comments

问题原因：需要实现页面平滑滚动到底部或顶部的功能，但没有使用任何库，只使用纯JS代码。

解决方法：使用window.scrollTo方法和behavior属性来实现页面的平滑滚动。通过将behavior属性设置为'smooth'，可以使滚动动作变得平滑。具体实现如下：

滚动到页面底部：

window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

滚动到页面顶部：

window.scrollTo({ top: 0, behavior: 'smooth' })

这个方法简单且有效，不依赖于任何库，而且在2022年仍然可行。

0