<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. js new date详解

    创建一个日期对象: var objDate=new Date([arguments list]); var ini_date=new Date(2014,7,0); //是代表7月最后一天 ,也就是2 ...

  2. Centos 安装KScope1.6.2

    准备工作:安装ctags graphviz,和cscope  (可以用yum install来安装) 1.首先下载kscope,最好下载16.x的版本,这个最好的 下载kscope-1.6.2.tar ...

  3. 琐碎-将hadoop源码作为工程导入eclipse

    之前写过如何用eclipse看hadoop源码,虽然非官方版的,但是可以达到目的,最重要是简单方便快速 官方版(hadoop2.2.0)的也有: 源码目录为: 和之前的源码目录有很大的不同 编译的时候 ...

  4. jdbc连接池中c3p0的配置文件的详解以及在在java中如何使用

    <c3p0-config> <!-- 默认配置,如果没有指定则使用这个配置 --> <default-config> <property name=" ...

  5. TCP/IP协议原理与应用笔记17:IP编址(重点)

    1. IP地址(通用标识符) 对于同一个网络设备(主机或路由器)的不同网络连接,需要不同的IP地址进行标识 2. 主机标识符 主要有下面三种方式的主机标识方式: (1)Name:是什么,可读性强(了解 ...

  6. 以前写过的一些oracle语句

    这下以后用起来就方便了.可算是找到了 Orcl 数据库服务 启动项: OracleDBConsoleorcl OracleOraDb10g_home1iSQL*Plus OracleOraDb10g_ ...

  7. Objective-C ,ios,iphone开发基础:几个常用类-NSString

    第一个字符串: //必须在字符串的前面加上@符号, NSString* str=@"shouqiang_Wei";//输出以%@输出. NSLog(@"%@", ...

  8. RedHat7搭建yum源服务器

    1.新建目录 # mkdir -p /content/rhel7/x86_64/{isos,dvd}/ 2.上传RedHat安装光盘镜像,上传后的路径为 /content/rhel7/x86_64/i ...

  9. Adobe Edge Animate –使用EdgeCommons加载和播放音频

    Adobe Edge Animate –使用EdgeCommons加载和播放音频 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在Edge中,可以new一 ...

  10. MySQL 更改默认编码为 utf8 (转)

      转自blog.sina.com.cn/s/blog_4c451e0e0100vefm.html 1.打开MySQL安装目录找到 my.ini,如:C:\Program Files\MySQL\My ...