MUI框架中回到顶部

mui提供了区域滚动组件，使用时需要遵循如下DOM结构：

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		<!--这里放置真实显示的DOM内容-->
	</div>
</div>

初始化scroll控件：

mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

快速回滚到该区域顶部，代码如下：

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

代码举例：

1. 需求：

当页面向上滑动至一定高度时，在屏幕右下方位置显示返回顶部图标按钮，该按钮默认透明，随着页面的上滑逐步加深至完全不透明,点击该按钮可逐渐滑动屏幕至返回顶部，返回顶部后该按钮消失        

2. 代码：

 图片按钮样式：默认透明

            <img id="toTop" 
				 style="width:50px;height:50px;
						position: absolute;
						z-index: inherit;
						bottom:30px;right: 10px;
						opacity: 0;"
				src="../homeicon/top.png">

 页面向上滑动至一定高度时，逐渐变为不透明：

    //对滚动区域添加监听滚动事件
    document.querySelector('.mui-scroll-wrapper').addEventListener('scroll',function (e) {
			//获取滚动的距离，设置透明度
			let opacity = Math.min(-e.detail.y/300,1);
			document.querySelector('#toTop').style.opacity=opacity;
	})

点击图片按钮，回到顶部：

    document.querySelector('#toTop').addEventListener("tap",function(){
		mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,1000);//100毫秒滚动到顶
	})

效果：