jquery返回顶部特效
<style>
p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; }
p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:30px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
transition:color 1s; -moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;}
p#back-to-top a span{
background:url(images/ico.jpg) no-repeat; display:block;height:30px; width:30px;margin-bottom:5px;
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
transition:background 1s; -moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
</style>
<div style="width: 100%; height: 3000px;"></div>
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=100){
$("#back-to-top").fadeIn(1500); //缓慢的将段落淡入
}
else{
$("#back-to-top").fadeOut(1500); //缓慢的将段落淡出
}
})
$("#back-to-top").click(function(){
$('body.html').animate({scrollTop},1000);
return false;
})
})
</script>
jquery返回顶部特效的更多相关文章
- jquery返回顶部,支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- JavaScript返回顶部特效
样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...
- jQuery返回顶部(精简版)
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- 【转】用jquery编写动态的返回顶部特效
jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...
- Jquery返回顶部插件
自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- jquery返回顶部
// 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...
随机推荐
- Objective-C语法之NSArray和NSMutableArray
转自:http://www.cnblogs.com/stoic/archive/2012/07/09/2582773.html Objective-C的数组比C++,Java的数组强大在于,NSArr ...
- 日志分析(三) kibana数据展示
kibana最新版本支持自定义数据大盘了,今天试用了下,感觉非常棒.上图: 支持多维度定义视图,然后视图里面可以依据粗粒度维度进行图表归类.总之,比旧版本强大太多了.后面试试能否扩展加入耦合一定业务数 ...
- Java多线程中start()和run()的区别
Java的线程是通过java.lang.Thread类来实现的.VM启动时会有一个由主方法所定义的线程.可以通过创建Thread的实例来创建新的线程.每个线程都是通过某个特定Thread对象所对应的方 ...
- TortoiseGit安装教程
TortoiseGit 是Windows下的可视化Git界面. 下载Git 网站地址: http://code.google.com/p/tortoisegit/ 安装前必须装上msysgit才能在W ...
- hive-安装MySQL(centos6.4)
为安装hive做准备,以前装过无数次,在线的.tar包的,一直不用忘得差不多了. centos6.4 虚拟机 先看有没有装,有的话应该是自带的,卸载就可以了 命令分别是 然后在线安装,命令是 (-y是 ...
- cooking java ——加密解密
java安全与密码概述 主要分为三部分: 密码学基础,包括:相关术语:分类:常用安全体系. java的安全组成:jdk以及第三方扩展. 相关实现代码,包括:base64.MD5········ 密码学 ...
- cocos2d-x lua 实现单例(管理类)
cocos2d-x lua 实现单例(管理类) version: cocos2d-x 3.6 示例代码 local DogManager = class("DogManager") ...
- c++算术运算时数据类型提升带来的问题
两类位移运算:左移和右移,逻辑的或者算术的. 左移比较简单:右边补0:右移:算术的补位是根据符号位确定的,逻辑的补0即可:java中是不同的,java貌似只补0. 位移中的类型提升问题过去没有注意过, ...
- Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频
Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权 ...
- SDKInitializer.initialize报错求助
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ...