如图中的代码块,怎样操作才能让页面的滚动条滚动到顶部?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>账单管理</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../../css/mui.min.css">
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">
账单管理
</h1>
<button id="btn_search_content" class="btn-header-right">筛选</button>
</header>
<div class="mui-content">
<div class="my-fangyuan">
<div class="my-search">
<ul class="my-select">
<li name="search_parent" id="communtiy_id" class="mui-ellipsis"><label>小区</label><span class="mui-icon mui-icon-arrowdown"></span></li>
<li name="search_parent" id="building_id" class="mui-ellipsis"><label>楼栋</label><span class="mui-icon mui-icon-arrowdown"></span></li>
<li name="search_parent" id="state" class="mui-ellipsis"><label>状态</label><span class="mui-icon mui-icon-arrowdown"></span></li>
</ul>
<div class="my-select-content">
<ul name="search_child" id="communtiy_id_list" class="communtiy_id_list">
</ul>
<ul name="search_child" id="building_id_list" class="building_id_list">
</ul>
<ul name="search_child" id="state_list" class="state_list">
<li data-stateKey=''>--请选择--</li>
<li data-stateKey='firstnopay'>首期未付</li>
<li data-stateKey='overdue'>已逾期</li>
<li data-stateKey='nopay'>未支付</li>
<li data-stateKey='alreadypay'>已支付</li>
</ul>
</div>
</div>
<div class="my-total-count4">
<dl>
<dt>{{countRecord.allcount}}</dt>
<dd>全部</dd>
</dl>
</div>
</div>
<!--下拉刷新容器-->
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-card">
<div class="mui-card-header">
账单编号:{{bill.ordercode}}
</div>
<div class="mui-card-content my-list-content">
<ul>
<li class="mui-table-view-cell my-table-col-2">
<span>账单类型</span>
<span>{{bill.order_type_str}}</span>
</li>
</ul>
</div>
<div class="mui-card-footer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../../js/jquery-1.11.3.js" ></script>
<script src="../../../js/mui.js"></script>
<script src="../../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
//阻尼系数
var deceleration = mui.os.ios?0.003:0.0009;
mui('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration:deceleration
});
mui.ready(function() {
//循环初始化所有下拉刷新,上拉加载。
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
page = 1;
queryBills();
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
++page;
queryBills();
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
});
var communityid='',buildingid='',stateKey='',totalPage = 1,page=0,rows=5,isPage=false;
//记录查询的楼层,用作页面返回回调。
var checkliIndex = 0;
var contentVM;
window.onload = function(){
mui.plusReady(function(){
contentVM = new Vue({
el: 'body',
data: {
countRecord: '',
dPage:''
}
});
page = 1;
queryBills();
//关闭等待框
plus.nativeUI.closeWaiting();
//显示当前页面
mui.currentWebview.show();
});
//FastClick.attach(document.body);
};
function queryBills(){
console.log("page:"+page);
if(page==1){
isPage = false;
// mui(".mui-slider-group .mui-scroll").scroll().refresh();
//mui(".mui-slider-group .mui-scroll").pullRefresh().scrollTo(0,0,500);
}else{
isPage = true;
}
var params = {};
params["userid"] = localStorage.getItem("userid");
params["communityid"]=communityid;
console.log(JSON.stringify(params));
params = aesEncrypt(JSON.stringify(params));
$.ajax({
type : "post",
url : ipAddr+'/app/bill/getBills',
data:{
params:params
},
success : function(data){
if(data.code == 1){
//把后台数据添加到前台
if(page==1){
contentVM.countRecord = data.countRecord;
}
contentVM.dPage = page==1 ? data.dPage : contentVM.dPage.concat(data.dPage);
totalPage=data.totalPage;
}
}
});
}
//小区查询点击事件
jQuery("#communtiy_id_list").on('tap', 'li', function(){
console.log("小区选中了");
//点击事件清空页面已有值
page=1;
totalPage = 1;
mui(".mui-slider-group .mui-scroll").pullToRefresh().down;
// mui(mui(".mui-slider-group .mui-scroll").pullToRefresh().pulldownRefresh().element.parentNode).scroll().refresh();
queryBills();
paraSelect(ipAddr+'/app/common/getBuildingList',{communityid:communityid!=''?communityid:'000'},'buildingid','buildingcode','building_id_list');
});
</script>
</html>
w***@163.com (作者)
不行,mui封装好的组件里边有保存上次的位置,scrollTo到顶部后,页面稍微滑动以下就会瞬间滚动到上次的位置……
2017-04-21 09:16