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

配合下拉刷新、上拉加载的返回顶部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

要回复文章请先登录注册

1***@163.com

1***@163.com

有没有那种左边列表右边详情的事例,左边列表可上拉加载,下拉刷新,左边列表点击右边详情内容更新
2018-07-19 17:14
FYC

FYC

不错,感谢分享
2018-06-02 15:23
启程588

启程588

双滚动条如果解决???
2018-01-07 13:57
距离您98米

距离您98米

回复 mingtianfu :
解决了吗?
2017-07-26 16:45
距离您98米

距离您98米

window.pageYOffset 怎么一直是0?
2017-07-26 16:17
2***@qq.com

2***@qq.com

和侧边导航有冲突,放到其他页面还好
2017-07-24 15:25
十年后的故事

十年后的故事

如何解决双滚动条的,怎么解决啊!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
官网的人呢???????
2017-05-04 11:46
5***@qq.com

5***@qq.com

mark
2017-04-27 15:48
口口

口口

同问~为什么引用后页面的滑动有双滑动条?怎么处理?
2017-04-13 11:58
十年后的故事

十年后的故事

为什么引用后页面的滑动有双滑动条?怎么处理?
2017-03-22 15:48