<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. 线程控制之线程和I/O

    http://www.cnblogs.com/nufangrensheng/p/3498723.html中介绍了pread和pwrite函数,这些函数在多线程环境下是非常有帮助的,因为进程中的所有线程 ...

  2. focuskye 学习及下载

    学习:http://www.focusky.com.cn/tutorials/ 下载:http://www.focusky.com.cn/download/

  3. AngularJS - contorller app module

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 1002 GTY's birthday gift

    GTY's birthday gift                                                                       Time Limit ...

  5. POWER DESIGN

    一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世界2)容易为人所理解3)便于计算机实现 概念数据模型也称信息模型,它以实体-联系(E ...

  6. 关于Hadoop集群的搭建环境变量相关配置

    在任何路径下输入HDFS中的命令都可以进行shell操作的配置: 要设置环境变量: (1) # vim /etc/profile在profile文件下面追加写入下面信息 export HADOOP_H ...

  7. this指针在不同情况下的指代

     说不同情况了吧,首先要分有几种情况使用this,然后再说分别指代什么 1)如果是一般标签下函数调用,this指代全局对象,也就是window对象或者document对象 2)如果在嵌套函数中被嵌套的 ...

  8. MYSQL 排行类的相关SQL写法,仅供参考

    SELECT * FROM () )) b

  9. SQL Server的三种物理连接之Loop Join(一)

    Sql Server有三种物理连接Loop Join,Merge Join,Hash Join, 当表之间连接的时候会选择其中之一,不同的连接产生的性能不同,理解这三种物理连接对性能调优有很大帮助. ...

  10. c++ 11 国标标准方面的异常处理与微软在Visual Studio 2012的异常处理的区别

    这段代码: __try { } __except(GetErrorCode()) { } 可以捕获空指针,但是包围在其中的代码不能有自带析构函数的对象.c++ 11 标准里面的auto_ptr关键字, ...