JavaScript 控制页面慢慢滚动

作者：vkvi 来源：ITPOW（原创）日期：2021-9-19

开始使用的是 jQuery 的 animate 加属性来滚动：

var height = $("html").height();
$("html").animate({ scrollTop: height }, 500);

如上代码，一执行，页面就慢慢滚动到底部，在电脑浏览器中没问题，但是手机微信中无效。于是改成下面的：

var height = $(document.body).height();
$(document.body).animate({ scrollTop: height }, 500);

这回手机微信有效了，但是电脑浏览器不行了。

那换成 $(window)、$(document) 怎么样？更惨，两边都无效了。

后来发现可以不使用 jQuery，直接使用自带的：

var height = $(document.body).height();
window.scrollTo({
	top: height,
	behavior: "smooth"
});

是否可以写成 bottom:0 呢？不可以。

window.scrollTo 还有另一种重载：window.scrollTo(x, y)，但没有平滑效果。

上面是对窗口滚动，也可以就某一元素内部滚动条进行滚动，如下：

document.querySelector(".className").scrollTo({
    top: 30
})

尽管本文相关阅读中 Mozilla 文档说：

 For scrolling elements, see Element.scrollTop and Element.scrollLeft.

但是实际上，scrollTo 用于 Element 时，也是有效的，即以上代码，经测试有效。