当用户在移动端触发页面滚动行为时，你一般想到的用哪些方式， 来提升用户体验？
如果在早期使用JQuery时 ，那么你可以调用$.animate() 方法，使用如下：
$("#scroll_container").animate({
scrollTop: "0px"
}, 500);
// 持续500毫秒，滚动至顶部
当然最原始直接的方式是在网页中使用锚点定位。
<a href="#">返回顶部</a>
当我们点击这个链接的时候，页面会马上定位到顶部，不过这样纯粹的效果，没有任何交互，是不是太简单了。。。
当然浏览器也提供了一些新的属性和方法，
第一个是 css 属性： scroll-behavior
在MDN上的解释为：
当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性
scroll-behavior为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。
常用的有两个属性：
scroll-behavior: auto; // 默认值
scroll-behavior: smooth; // 平滑效果
用法： 将scroll-behavior:smooth 写在滚动容器元素上，用户触发某个事件时，会有一个平滑滚动的效果。
Demo：
css代码：
.label {
width: 100px;
margin-right: -1px;
border: 1px solid #ccc; border-bottom: 0;
padding-top: 5px; padding-bottom: 5px;
background-color: #eee;
text-align: center;
float: left;
}
.box {
height: 200px;
border: 1px solid #ccc;
scroll-behavior: smooth;
overflow: hidden;
}
.content {
height: 100%;
padding: 0 20px;
position: relative;
overflow: hidden;
}
.box input {
position: absolute; top:0;
height: 100%; width: 1px;
border:0; padding: 0; margin: 0;
clip: rect(0 0 0 0);
}
html 代码：
<div class="tab">
<label class="label" for="tab1">选项卡1</label>
<label class="label" for="tab2">选项卡2</label>
<label class="label" for="tab3">选项卡3</label>
</div>
<div class="box">
<div class="content"><input id="tab1">
<p>我是选项卡1的内容</p>
</div>
<div class="content"><input id="tab2">
<p>我是选项卡2的内容</p>
</div>
<div class="content"><input id="tab3">
<p>我是选项卡3的内容</p>
</div>
</div>
所以。 添加一行代码，就可以实现滚动效果，是不是很酷？？
第二个是 DOM元素的scrollIntoView() 方法
也是浏览器支持的原生jsAPI， 该方法会滚动元素的父容器，
语法：
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
使用如下：
targetElement.scrollIntoView({
behavior: "smooth",
block: "end",
inline: "nearest"
});
也可以只传一个参数（options），也可以不传， 更多用法，请参考 MDN
兼容性：
scroll-behavior：
scrollIntoView：
如果有更好的方法，欢迎大家留言，第一时间看到会及时回复。 感谢！
