MUI返回顶部功能

"); </div> MUI返回顶部功能代码分享给大家，B5教程网希望对大家学习有所帮助.

完整的代码如下

html 部分：

<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 部分：

1. var scrollToTopBox = document.getElementById('scrollToTop'); //返回按钮tap  
2. scrollToTopBox.addEventListener('tap', function(e) {  
3.     e.stopPropagation(); mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 100);//滚动到顶部  
4. });  
5. // Android上监听原生滚动，iOS上监听div滚动，上拉超过一屏后显示按钮，否则隐藏，可自行在条件判断中修改  
6. if (mui.os.android) {  
7.     window.addEventListener('scroll', function(e) {  
8.         if (window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide')){ 
9.             scrollToTopBox.classList.remove('hide'); 
10.         }else if(window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide')){ 
11.             scrollToTopBox.classList.add('hide'); 
12.         } 
13.     });  
14. } else {  
15.     document.getElementById('pullrefresh').addEventListener('scroll', function() {  
16.         if (mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide')){ 
17.             scrollToTopBox.classList.remove('hide'); 
18.         }else if(mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide')){ 
19.             scrollToTopBox.classList.add('hide'); 
20.         } 
21.     }); } 

备注：如果不是打包APP请在完整代码中把安卓监听部分去掉就可以解决兼容性问题，因为，打包成APP安卓监听部分才会生效