闪闪
闪闪
  • 发布:2016-01-26 17:41
  • 更新:2016-01-26 17:41
  • 阅读:18220

配合下拉刷新、上拉加载的返回顶部demo(适用任何页面)

分类:MUI

看到很多人提到了这个问题,正好自己也需要返回顶部的操作,总结了下各处的问题与回答,把实现的代码放出来,供参考。

下拉刷新、上拉加载的容器和返回顶部按钮,按钮默认不显示:

<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');  
        });
19 关注 分享
anke 江湖再见 回到过去 冰冻 Element xhq shawnan 7***@qq.com 4***@qq.com 杰哥seo PercyCJ cccccode Trust ali 5***@qq.com 十年后的故事 1***@qq.com 8***@qq.com q***@163.com

要回复文章请先登录注册

丑陋的裸男

丑陋的裸男

mark
2017-01-04 11:28
PercyCJ

PercyCJ

2016-12-23 11:37
shawnan

shawnan

mark
2016-09-19 09:47
闪闪

闪闪 (作者)

回复 mingtianfu :
检查下数据处理的代码
2016-08-15 09:26
mingtianfu

mingtianfu

IOS 下报这个错,大家有这个问题吗
Uncaught RangeError: Maximum call stack size exceeded.
2016-08-13 15:04
mingtianfu

mingtianfu

mark
2016-08-11 11:31
闪闪

闪闪 (作者)

回复 昵称不存在 :
ios上可以,Android上没出现,看下自己的上拉加载是不是对webview的上拉,ios中是对div的拖动,所以代码中分别做了处理。
2016-05-18 16:06
闪闪

闪闪 (作者)

回复 昵称不存在 :
可能是你的其他内容的z-index大于“返回顶部”图标的z-index
2016-05-18 16:03
昵称不存在

昵称不存在

回复 恰恰好2 :
安卓上边怎么办???也无法显示
2016-05-18 14:48
昵称不存在

昵称不存在

安卓下无法显示返回顶部图标,什么原因请告知万分感谢!!!Q173708997
2016-05-18 01:02