JS回到顶部代码小记
2016-05-13 08:53
597 查看
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/themes/base/images/ico_top.gif" alt="回到页首" title="回到页首 Top"></a> </div> CSS: #goTop { bottom: 15px; margin: 0 auto; position: fixed; //固定定位 margin-left: 945px; } JS: //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#goTop").fadeIn(1500); } else { $("#goTop").fadeOut(1500); } }); //当点击跳转链接后,回到页面顶部位置 $("#goTop").click(function () { $('body,html').animate({ scrollTop: 0 }, 1000); return false; }); });
相关文章推荐
- 浅析创建javascript对象的方法
- javascript json
- js遍历集合(Array,Map,Set)
- 9个最好用的JavaScript开发工具和代码编辑器
- [Javascript] Writing conventional commits with commitizen
- [Javascript] Automating Releases with semantic-release
- ES6新特性:Javascript中的Map和WeakMap对象
- 编写高质量JavaScript代码的68个有效方法
- 《JavaScript权威指南(第6版)(中文版)》PDF
- 《JavaScript基础教程(第8版)》PDF
- js中checkbox的全选和反选的实现
- js中的匿名函数
- js在函数中未定义的变量的处理
- js中的isNaN()函数
- javascript跳跃式前进(4) - 对象基础理论
- javascript跳跃式前进(4) - 对象基础理论
- js中boolean类型的理解
- js
- Javascript运算符进阶指南
- Phantomjs抓取渲染JS后的网页(Python代码)