返回到顶部代码
2016-04-05 10:25
302 查看
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ var offset = 300, offset_opacity = 1200, scroll_top_duration = 700, $back_to_top = $('.cd-top'); $(window).scroll(function(){ ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); if( $(this).scrollTop() > offset_opacity ) { $back_to_top.addClass('cd-fade-out'); } }); $back_to_top.on('click', function(event){ event.preventDefault(); $('body,html').animate({ scrollTop: 0 , }, scroll_top_duration ); }); }); </script> <style> .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(http://www.100sucai.com/img/demo/1335.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-top.cd-is-visible,.cd-top.cd-fade-out,.no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { visibility: visible; opacity: 1; } .cd-top.cd-fade-out { opacity: .5; } .no-touch .cd-top:hover { background-color: #e86256; opacity: 1; } </style> <title>Back To Top | Cody</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> 返回顶部代码 <div style="height: 1500px;"></div> <div class="cd-top">Top</div> </body> </html>
相关文章推荐
- Eclipse 安装FindBugs插件
- 解决在极光推送的时候会出现一个 JPush提示:缺少统计代码
- Day4、Python
- idea 检出 maven工程下源文件目录main/src/java问题
- C# Regex ignoring non-capturing group
- [Java] 实验6参考代码
- Python中"=“,浅复制和深复制的理解
- mono嵌入式应用研究(二):虚拟机的初始化
- Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源 方法
- Spring框架-->面试问答
- Java编写计算器的常见方法实例总结
- c# log组件 log4net使用介绍
- C++中二维数组的参数传递
- Java数据类型(下)
- [C/C++]_[初级]_[原子操作1]
- [C/C++]_[初级]_[原子操作]
- C++命名空间
- js的【java.util.Date】转【String】
- Python-OpenCV(4)
- FileDataSource java的文件操作