当前位置: 首页 > news >正文

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

转载于:https://www.cnblogs.com/vanilla-sky/p/10768342.html

相关文章:

  • 知识点---js监听手机返回键,回到指定界面
  • 无论你是什么职业,这篇职场生存法则都是你必备的
  • 余莹是谁?
  • 37.C#--面对对象_类的基本使用
  • C++STL之vector用法总结
  • Angular-使用好NgForOf的trackBy带来性能上的提升
  • 微服务
  • 一篇文章告诉你Python上下文管理器怎么用
  • python算法之插入排序
  • swift学习笔记1
  • 关于可变参数varargs
  • Educational Codeforces Round 64 -C(二分)
  • Windows 10一个很愚蠢的做法
  • 英语影视台词---无敌破坏王2大脑互联网
  • 开源CMS比较
  • Apache Spark Streaming 使用实例
  • DOM的那些事
  • Effective Java 笔记(一)
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • sublime配置文件
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 从重复到重用
  • 翻译 | 老司机带你秒懂内存管理 - 第一部(共三部)
  • 欢迎参加第二届中国游戏开发者大会
  • 思考 CSS 架构
  • 问题之ssh中Host key verification failed的解决
  • RDS-Mysql 物理备份恢复到本地数据库上
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • ​软考-高级-系统架构设计师教程(清华第2版)【第1章-绪论-思维导图】​
  • #define
  • (13)Latex:基于ΤΕΧ的自动排版系统——写论文必备
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (Ruby)Ubuntu12.04安装Rails环境
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (附源码)python房屋租赁管理系统 毕业设计 745613
  • (四)鸿鹄云架构一服务注册中心
  • (五)MySQL的备份及恢复
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转载)从 Java 代码到 Java 堆
  • ... 是什么 ?... 有什么用处?
  • .CSS-hover 的解释
  • .java 9 找不到符号_java找不到符号
  • .libPaths()设置包加载目录
  • .NET 4.0中使用内存映射文件实现进程通讯
  • .net core 连接数据库,通过数据库生成Modell
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • .Net的C#语言取月份数值对应的MonthName值
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • @vue/cli 3.x+引入jQuery
  • [ CTF ]【天格】战队WriteUp- 2022年第三届“网鼎杯”网络安全大赛(青龙组)
  • [ 隧道技术 ] 反弹shell的集中常见方式(四)python反弹shell
  • [ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务
  • []T 还是 []*T, 这是一个问题
  • [100天算法】-x 的平方根(day 61)