转：http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html

用jQuery实现渐隐渐显的返回顶部效果（附多图）

 

先来看几个图片效果：

提供几个样式图片：

样式图片都可以自己随便修改了

样式css:

<style type="text/css">

    body,p,a,div{

        margin:0px;

        padding:0px;

    }

    body{

        font:14px/22px Georgia serif;

        margin:0 auto;

        width:640px;

    }

    h1{

        font: bold 80%/120% Arial, Helvetica, sans-serif;

        text-transform: uppercase;

        margin: 0 0 10px;

        color: #999;

    }

    h2{

        font-size: 22px;

        margin: 0 0 8px;

    }

    h3{

        font-size: 1.6em;

        margin: 20px 0 5px;

    }

    a{

        color: #333;

        text-decoration: none;

    }

    a:hover{

        color: #548B02;

    }

    p{

        margin-bottom:25px;

    }

    #back-to-top{

        position:fixed;

        bottom:100px;

        left:60px;

    }

    #back-to-top a{

        text-align:center;

        text-decoration:none;

        color:#d1d1d1;

        display:block;

        width:80px;

        /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

        -moz-transition:color 1s; 

        -webkit-transition:color 1s;

        -o-transition:color 1s;

    }

    #back-to-top a:hover{

        color:#979797;

    }

    #back-to-top a span{

        background:#d1d1d1;

        border-radius:6px;

        display:block;

        height:80px;

        width:80px;

        background:#d1d1d1 url(images/arrow_up1.png) no-repeat center center;

　　　　/*这是图片链接地址1*/        margin-bottom:5px;

        -moz-transition:background 1s;

        -webkit-transition:background 1s;

        -o-transition:background 1s;

    }

    #back-to-top a:hover span{

        background:#979797 url(images/arrow_up1.png) no-repeat center center;

　　　　/*这是图片链接地址1*/ 　　 }

  </style>

Jquery代码：

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>//这里引入你自己的jq或者用这个在线jq

  <script type="text/javascript">

      $(document).ready(function () {

          //首先将#back-to-top隐藏

          $("#back-to-top").hide();

          //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

          $(function () {

              $(window).scroll(function () {

                  if ($(window).scrollTop() > 100) {

                      $("#back-to-top").fadeIn(1500);

                  }

                  else {

                      $("#back-to-top").fadeOut(1000);

                  }

              });

              //当点击跳转链接后，回到页面顶部位置

              $("#back-to-top").click(function () {

                  $('body,html').animate({ scrollTop: 0 }, 1000);

                  return false;

              });

          });

      });

  </script>

html：

<body id="top">

    <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p>

这里面放文章的内容就好了 </body>

文章内容自己添加

热爱编程，热爱技术，热爱生活
 
分类: JQuery
 
3
0
 
    (请您对文章做出评价)   
 
posted @ 2012-04-20 11:50 Jimmy-Lee 阅读(2025) 评论(0)  编辑 收藏

 

公告

访问量统计
昵称：Jimmy-Lee 园龄：2年 粉丝：9 关注：2

< 2012年4月 >
日 一 二 三 四 五 六
25 26 27 28 29 30 31
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 1 2 3 4 5

搜索

我的标签

积分与排名

  • 积分 - 12483
  • 排名 - 10740

最新评论

  • 1. Re:Easyui1.32源码翻译--datagrid(数据表格)
  • 顶博主,美周郎, 金链男子白玉床. 战罢娇娘三百万, 江湖人称不倒枪, 银镯女优常留寝, 夸你活好耐力强.
  • --斯诺登
  • 2. Re:Easyui1.32源码翻译--datagrid(数据表格)
  • 赞
  • --要有好的心情
  • 3. Re:Easyui1.32源码翻译--datagrid(数据表格)
  • 武腾兰、吉泽明步、苍井空、松岛枫、神谷姬、小泽玛莉亚、高树玛丽亚、山本梓、樱树露衣、濑户由衣、树麻里子、星野光、白石瞳、忧木瞳、白石日和、相田桃、浅仓舞、小林瞳、夕树舞子、美穗由纪、小室友里、黑木香、朝冈实岭、美里真里、饭岛爱、北原梨奈、秋元友美、川合里美、细川百合子、麻生早苗、松阪季实子、川岛和津实、小泽奈美、叶山丽子、金泽文子、凉木桃香、小泽圆、铃木麻奈美、白鸟智香子、中谷香子、市川香织、蜷川...
  • --Jimmy-Lee
  • 4. Re:JavaScript数据类型之Boolean类型
  • C 也是这种机制呐
  • --FX夜归人

 

 
Copyright ©2013 Jimmy-Lee

❄
❄
❄
❄
❄
❄

Jquery 回到顶部的更多相关文章

  1. jQuery回到顶部

    jquery回到顶部 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=& ...

  2. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  3. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  4. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  5. jquery 回到 顶部

    1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...

  6. Jquery回到顶部功能

    问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...

  7. jquery 回到顶部，简洁大方

    效果

  8. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  9. Jquery回到顶部效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. MyBatis 入门到精通(一) 了解MyBatis获取SqlSession

    MyBatis是什么? MyBatis是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架.MyBatis几乎消除了所有的JDBC代码,也基本不需要手工去设置参数和获取检索结果.MyBatis ...

  2. 类装载器ClassLoader

    类装载器工作机制 类装载器就是寻找类的节码文件并构造出类在JVM内部表示对象的组件.在Java中,类装载器把一个类装入JVM中,要经过以下步骤: [1.]装载:查找和导入Class文件: [2.]链接 ...

  3. C# 邮件发送系统

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. 走向DBA[MSSQL篇] - 从SQL语句的角度提高数据库的访问性能(转)

    最近公司来一个非常虎的DBA,10几年的经验,这里就称之为蔡老师吧,在征得我们蔡老同意的前提下 ,我们来分享一下蔡老给我们带来的宝贵财富,欢迎其他的DBA来拍砖.  目录 1.什么是执行计划?执行计划 ...

  5. Party at Hali-Bula

    题意: n个人参加party,给出n个人的工作关系树,一个人和他的顶头上司不能同时参加,party达到的最大人数并判断邀请的最大人数名单是否唯一. 分析: 树状dp入门 dp[i][f],以i为根的子 ...

  6. Long Dominoes(ZOJ 2563状压dp)

    题意:n*m方格用1*3的方格填充(不能重叠)求有多少种填充方法 分析:先想状态,但想来想去就是觉得不能覆盖所有情况,隔了一天,看看题解,原来要用三进制 0 表示横着放或竖放的最后一行,1表示竖放的中 ...

  7. asp.net中遍历界面上所有控件进行属性设置

    * 使用方法: *  前台页面调用方法,重置:    protected void Reset_Click(object sender, EventArgs e)        {           ...

  8. 【C++对象模型】构造函数语意学之二 拷贝构造函数

    关于默认拷贝构造函数,有一点和默认构造函数类似,就是编译器只有在[需要的时候]才去合成默认的拷贝构造函数. 在什么时候才是[需要的时候]呢? 也就是类不展现[bitwise copy semantic ...

  9. 【和我一起学python吧】Python安装、配置图文详解

     Python安装.配置图文详解 目录: 一. Python简介 二. 安装python 1. 在windows下安装 2. 在Linux下安装 三. 在windows下配置python集成开发环境( ...

  10. Result consisted of more than one row 错误的解决

    创建MySql的存储过程时,发生“Result consisted of more than one row”的错误. 存储过程的代码如下: )) BEGIN SELECT PetName into ...