<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返回顶部特效的更多相关文章

  1. jquery返回顶部,支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. JavaScript返回顶部特效

    样式: <style type="text/css"> /*返回顶部特效*/ a { border: none; text-decoration: none; outl ...

  3. jQuery返回顶部(精简版)

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  4. 【转】用jquery编写动态的返回顶部特效

    jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...

  5. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  6. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  7. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  8. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  9. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

随机推荐

  1. 僵尸进程 图解 分布式 LINUX内核

    http://blog.csdn.net/chdhust/article/details/11872467 服务器进程为何通常fork()两次

  2. C 高级编程3 静态库与动态库

    http://blog.csdn.net/Lux_Veritas/article/details/11934083http://www.cnblogs.com/catch/p/3857964.html ...

  3. 高并发网络编程之epoll详解

    select.poll和epoll的区别 在linux没有实现epoll事件驱动机制之前,我们一般选择用select或者poll等IO多路复用的方法来实现并发服务程序.在大数据.高并发.集群等一些名词 ...

  4. 日志分析(五) PV&UV

    应用设计请求之初,对于url有一定的规划.因此,请求的url格式类似如下: /**/school/****?token=a66cb2a3-e0b7-4f0a-b332-********* token唯 ...

  5. OSGi 学习(一)

    从基础开始,先来说说OSGi的基本理念. OSGi通过隔离底层classloader,强制应用在设计的时候就考虑模块化,并且基于白板模式来支持服务的注册与订阅. 在OSGi中,模块可以等价理解为bun ...

  6. [ZZ]C++中,引用和指针的区别

    (1) 引用总是指向一个对象,没有所谓的 null reference .所有当有可能指向一个对象也由可能不指向对象则必须使用 指针. 由于C++ 要求 reference 总是指向一个对象所以 re ...

  7. 简简单单安装debian桌面工作环境

    linux一般给人的影响是对使用者的要求偏高, 使用者需要自行配置很多相应的系统工作参数,因此,从一定的程度上阻碍了用户去使用它.而本文所介绍的是, 使用者完全可以消除这个障碍,非常简单地安装好自己的 ...

  8. hadoop实例---多表关联

    多表关联和单表关联类似,它也是通过对原始数据进行一定的处理,从其中挖掘出关心的信息.如下 输入的是两个文件,一个代表工厂表,包含工厂名列和地址编号列:另一个代表地址表,包含地址名列和地址编号列.要求从 ...

  9. 把旧的项目改变名称重新部署到tomcat下发现项目名称还是原来的项目名称,解决方案

    选中项目右键点击properties 在type file text 中输入web 选择web在右边可以看到web-context-root 把里面的项目名称改成你最新的就ok了

  10. 前端必会css整理

    1.设置css样式的三种方式?         外部样式表,引入一个外部css文件         内部样式表,将css代码放在<head>标签内部         内联样式,将css样式 ...