超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码
2016-06-14 17:40
891 查看
//以下代码放到一个adapt.js文件当中 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth /750) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); function goTopEx() { var obj = document.getElementById("goTopBtn"); function getScrollTop() { return document.documentElement.scrollTop + document.body.scrollTop; } function setScrollTop(value) { if (document.documentElement.scrollTop) { document.documentElement.scrollTop = value; } else { document.body.scrollTop = value; } } window.onscroll = function() { getScrollTop() > 0 ? obj.style.display = "": obj.style.display = "none"; } obj.onclick = function() { var goTop = setInterval(scrollMove, 10); function scrollMove() { setScrollTop(getScrollTop() / 1.1); if (getScrollTop() < 1) clearInterval(goTop); } } }html文档代码:
<script src="js/adapt.js"></script> <-- 以下是超过高度显示回到顶部代码 --> <div id="goTopBtn"><img src="img/index_03.png"/></div> <script type=text/javascript>goTopEx();</script>
相关文章推荐
- android.os.Process.killProcess(android.os.Process.myPid())与Activity生命周期的影响
- Unity3d-Particle System系统的学习(二)
- android与h5
- 物流配货平台Hybrid APP效果图
- Android:PopupMenu显示item中的android:icon
- 接口回调基本建立
- 第三方 MJRefresh 实现 iOS中 上拉加载更多,下拉刷新数据
- Android 常用数据适配器ArrayAdapter
- LayoutTransition 布局动画笔记
- HTML5打开本地app应用的方法,如果你的手机上安装App,就会自动打app,否则在页面上会提示你进行下载app
- android源码使用proguard混淆编译及错误总结
- iOS项目持续集成:jenkins+Github+蒲公英
- Android 进程常驻(使用第三方MarsDaemon)(虽然不可用,但是还是保留下。)
- android文本编辑框点击隐藏输入法
- iOS10 权限崩溃问题
- 【Android】Android自定义属性,attr format取值类型
- android客户端学习-json解析
- 移动App统计指标汇总
- Android 智能TV电视系统遥控器键值添加
- iOS Emoji表情编码/解码