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 均可

posted @ 2019-04-25 14:41 无尽海阅读(658) 评论(0) 收藏举报

刷新页面返回顶部