小陈有这样一个需求：移动端用户进到页面后，页面滚动到课程列表页的当前学习课程部分（即滚动到特定位置）。

一、顿挫干瘪的滚动

初看这个需求，是不是超级简单。

只需要利用 a 标签的锚点功能，就能让页面滚动到指定位置：

<a href="">课程A</a>

实际效果：

眉头一皱，这顿挫感，犹如坐着八十年代拖拉机一般蓝瘦~

二、scroll-behavior

不要慌，只需要一行简单的 CSS 代码，就能让你的页面纵享德芙般丝滑。

.container {
    scroll-behavior: smooth; 
}
复制代码

怎么样，是不是丝滑般顺畅，而且代码极其简单。

别高兴的太早了，再通过 caniuse 来看看它的兼容性：

眉头一皱，果然事情不简单，这个特性在移动端 ios 基本不支持。那么在 ios 上只能通过传统的 JS 来实现丝滑滚动了。

三、JS 也能纵享丝滑

方法一：scrollIntoView

scrollIntoView 是原生的 JS API。通过一段简单的代码，也能实现丝滑滚动。

target.scrollIntoView({
    behavior: "smooth"
});
复制代码

虽然 scrollIntoView 也能实现，但是它的浏览器支持度并不友好，在 ios 上依然不支持，谨慎使用。

方法二：JQuery

JQuery animate() 就能实现这样一个简单的动画：

scrollContainer.animate({
    scrollTop: 0
});
复制代码

方法三：手撕JS

自己手撕一个德芙滑动其实也很简单，直接上代码：

光看代码感受不到那般丝滑，来看看效果图对比：

丝滑般感受，就是如此简单~