html 元素平滑滚动到某一位置

在网上查了大半天，有人用高度算，然后setTimeout的，那个观感真的是差到家了，还有人说用 js动画库的

其实很简单，直接用window.scrollTo 这个方法就完事了

回到顶部

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

滚到底部

window.scrollTo({
     top:  document.documentElement.scrollHeight,
     behavior: "smooth"
});

top 就是高度值

哎，前端就是要命

Api

来自 https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo

Window.scrollTo()

摘要

滚动到文档中的某个坐标。

语法

window.scrollTo(x-coord,y-coord )
window.scrollTo(options)

参数

• x-coord 是文档中的横轴坐标。
• y-coord 是文档中的纵轴坐标。
• options 是一个包含三个属性的对象:
  1. top 等同于 y-coord
  2. left 等同于 x-coord
  3. behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto

例子

window.scrollTo( 0, 1000 );

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});