scrollTo和scrollBy方法添加动画

1. scrollTo 的用法

语法：

// 滚动到文档中的某个坐标
window.scrollTo(x-coord,y-coord) // 较为常用
window.scrollTo(options)

// 使界面滚动到给定元素的指定坐标位置
element.scrollTo(x-coord, y-coord) // 较为常用
element.scrollTo(options)

2. scrollBy 的用法

语法：

在窗口中按指定的偏移量滚动文档
window.scrollBy(x-coord,y-coord) // 较为常用
window.scrollBy(options)

//使得元素滚动一段特定距离*
element.scrollBy(x-coord, y-coord) // 较为常用
element.scrollBy(options)

3. 如何加入动画

当我们使用较为常用 scrollBy 或者 scrollTo 方法时，页面会直接跳转到需要跳转到的位置，看不到动画效果，但是如果需要看到页面的滚动效果，只需要用方法二进行传参即可

语法：

/**
 * top 等同于 y-coord
 * left 等同于 x-coord
 * behavior 表示滚动行为，支持参数：smooth (平滑滚动)，instant (瞬间滚动)，默认值 auto，效果等同于 instant
 */
element.scrollTo({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

element.scrollBy({
  top: 100,
  left: 100,
  behavior: 'smooth'
});

示例：

// 以下两种方式是等效的，scrollBy 和 scrollTo 的传参是相同的
element.scrollTo(0, 100)

element.scrollTo({
  top: 0,
  left: 100,
  behavior: 'instant'
});