MUI 返回顶部
1 //绑定滚动到顶部按钮事件 2 if ($("#scroll-up").length > 0) { 3 4 var scrollToTopBox = $("#scroll-up"), isVisible = false; 5 $(window).on("scroll.btnScrollTop", function() { 6 var scroll = $(window).scrollTop(), h = $(window).height(), sh = document.body.scrollHeight; 7 if (scroll > parseInt(h / 4) || (scroll > 0 && sh >= h && h + scroll >= sh - 1)) { 8 if (!isVisible) { 9 scrollToTopBox.addClass("display"); 10 isVisible = true 11 } 12 } else { 13 if (isVisible) { 14 scrollToTopBox.removeClass("display"); 15 isVisible = false 16 } 17 } 18 }).triggerHandler("scroll.btnScrollTop"); 19 mui('body').on('tap', '#scroll-up', function(e) { 20 e.stopPropagation(); 21 window.scrollTo(0, 0, 100); 22 23 24 }) 25 }
<a id="scroll-up" href="#" class="btn btn-sm"> <span class="mui-icon mui-icon-arrowup"></span> </a>
CSS
1 #scroll-up { 2 border-width: 0; 3 position: fixed; 4 right: 2px; 5 z-index: 99; 6 -webkit-transition-duration: .3s; 7 transition-duration: .3s; 8 opacity: 0; 9 filter: alpha(opacity=0); 10 bottom: -24px; 11 visibility: hidden; 12 background-color: #aaa; 13 color: #fff; 14 font-size: 14px 15 } 16 17 #scroll-up.display { 18 opacity: .7; 19 filter: alpha(opacity=70); 20 bottom: 2px; 21 visibility: visible 22 } 23 24 #scroll-up:hover { 25 opacity: 1; 26 filter: alpha(opacity=100) 27 } 28 29 #scroll-up:focus { 30 outline: 0 31 }
其中字体文件需要替换为例自己的ttf文件,另外在
<span class="mui-icon mui-icon-arrowup"></span>
里面的class也修改为例想要的即可,实测Android IOS 均可