看到很多人提到了这个问题,正好自己也需要返回顶部的操作,总结了下各处的问题与回答,把实现的代码放出来,供参考。
下拉刷新、上拉加载的容器和返回顶部按钮,按钮默认不显示:
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="list" class="mui-table-view"></ul>
</div>
</div>
<a id="scrollToTop" class="backTop hide">
<span class="mui-icon mui-icon-arrowup"></span>
</a>
按钮对应的css:
.hide {
display: none;
}
.backTop {
background: #DDDDDD;
border-radius: 50%;
position: fixed;
right: 10px;
bottom: 15px;
width: 38px;
height: 38px;
z-index: 9999;
text-align: center;
font-size: 18px;
color: #666666;
padding-top: 8px;
opacity: 0.8;
}
js中添加事件监听:
var scrollToTopBox = document.getElementById('scrollToTop');
//返回按钮tap
scrollToTopBox.addEventListener('tap', function(e) {
e.stopPropagation();
mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);//滚动到顶部
});
//Android上监听原生滚动,iOS上监听div滚动,上拉超过一屏后显示按钮,否则隐藏,可自行在条件判断中修改
if (mui.os.android) {
window.addEventListener('scroll', function(e) {
if (window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.remove('hide');
else if (window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.add('hide');
});
} else {
document.getElementById('pullrefresh').addEventListener('scroll', function() {
if (mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.remove('hide');
else if (mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.add('hide');
});
}
该方法也可用于任何需要返回顶部的页面,做一下适当的修改,此时不区分Android和iOS,代码如下:
var scrollToTopBox = document.getElementById('scrollToTop');
scrollToTopBox.addEventListener('tap', function(e) {
e.stopPropagation();
mui('body').pullRefresh().scrollTo(0, 0, 100);
});
window.addEventListener('scroll', function() {
if (window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.remove('hide');
else if (window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide'))
scrollToTopBox.classList.add('hide');
});
25 个评论
要回复文章请先登录或注册
1***@163.com
FYC
启程588
距离您98米
距离您98米
2***@qq.com
十年后的故事
5***@qq.com
口口
十年后的故事