JS实现回到顶部按钮
2016-06-30 21:16
411 查看
一
今天在写我的测试工具箱,我突然发现一个问题,好像所有页面都存在这样的问题:页面内容过长导致想要返回页面顶部的时候非常麻烦,所以我想通过JS来实现一个返回顶部的按钮。二
当然,作为半桶水的JS开发人员,让我自己写肯定是完不成的,那么就应该好好的使用Google和百度。在我找的过程中我发现有很多方法,不过看起来都很花哨,我只想要一个最简单的方法。
三
最后还是我旁边的前端开发给了我结果,代码如下,做一个记录。<script> $(function () { $(window).scroll(function () { if ($(this).scrollTop() != 0) { $("#toTop").fadeIn(); } else { $("#toTop").fadeOut(); } }); $("body").append("<div id=\"toTop\" style=\"border:1px solid #444;background:#333;color:#fff;text-align:center;padding:10px 13px 7px 13px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;font-family:verdana;font-size:22px;\">^</div>"); $("#toTop").click(function () { $("body,html").animate({scrollTop: 0}, 800); }); }) </script>
四
我的工具箱的base.html页面上放入这个方法,那么所有的页面,只要超过一个屏幕,就会自动在右下角出现一个返回顶部的按钮,使用起来非常爽,也不需要依赖外部的资源。
相关文章推荐
- [从codewars学习到的JS系列2]正则表达式中的exec()与字符串的match()方法区别
- 解析JSON数据
- Servlet中获得JSP四大作用域的方法
- javaScript的null和undefined
- javascript “||”、“&&”的灵活运用
- 数组json格式的字符串 转 list<Bean>
- JSR 303
- Json 转 dynamic
- 说说JSON和JSONP区别,也许你会豁然开朗(转载)
- jsonp详解详情
- js级联菜单
- JS截字符串处理数字,汉字,英文问题
- jsp理论大串讲
- js字符串和正则表达式中的match、replace、exec等函数详解
- javascript函数定义_调用_与功能
- 浏览器端测试:mocha,chai,phantomjs
- JS中undefined与null的区别
- ECHARTS的基本使用:柱状图、折线图、饼图等
- 初识JSP
- artTemplate.js插件