<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. Ruby on Rails Tutorial 第二章 之 toy_app项目搭建

    (第一章小结) 第一步:生成项目骨架 $ rails _4.1.6_ new toy_app 第二步:修改Gemfile 第三步:安装gem $ bundle install --without pr ...

  2. Vesions ignore & ld: library not found for -l...

    1.递归删除指定目录下的 .git..svn 文件 find . -name .git | xargs rm -fr find . -name .svn | xargs rm -rf 第一条倒还不常用 ...

  3. laraval框架之数据库不可不吐槽的坑

    最近做的项目一直在用laraval框架,有些地方确实很方便,但是有些方面实在是太坑了,就比如这次在数据库里,官方文档写的是 Take note that email is not a required ...

  4. Linux 学习笔记 Linux环境变量初稿

    set命令会显示为某个特定进程设置的所有环境变量,但不包括一些没有设置值的默认环境变量 可以通过等号来给环境变量赋值,值可以是数值或字符串 如果要给变量赋一个含有空格的字符串值,必需用单引号来界定字符 ...

  5. 无法挂载 “7.9 GB Filesystem”.

    有个8G的U盘,格式化成exfat格式.插入电脑后点击盘符,弹出错误提示: 无法挂载 “7.9 GB Filesystem”. Error mounting: mount exited with ex ...

  6. 高效Count

    SQL Server快速查询某张表的当前行数   传统做法可能是select count(1) 但是往往会比较慢.推荐如下做法: SELECT ISNULL(MAX(rowcnt), 0) Curre ...

  7. Linux 命令 - chmod: 更改文件模式

    文件的模式 当使用 ls -l 命令查看目录内容时 [huey@huey-K42JE cmdline]$ ls -l /etc/passwd -rw-r--r-- 1 root root 1917 J ...

  8. jqueryeasyui中文乱码问题

    下载的Demo中charset=utf-8,手动改成gb3212,问题解决.

  9. 你不知道的JSON的高效率用法

    1.JSON JSON是JavaScript Object Notation的缩写,是JavaScript标准的一个子集.官方Android API已经内置支持读写JSON数据.这种格式非常适合表示不 ...

  10. 在Tomcat中配置基于springside的项目

    注意点: Tomcat默认没有配置Transaction,需要在/Conf/Context.xml配置 1 <Transaction factory="org.objectweb.jo ...