<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>webrx-title</title>

<script src="js/jquery-1.11.1.min.js"></script>

<style>

/*returnTop*/

p#back-to-top{

    position:fixed;

    display:none;

    bottom:100px;

    right:80px;

}

p#back-to-top a{

    text-align:center;

    text-decoration:none;

    color:#d1d1d1;

    display:block;

    width:64px;

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

    -moz-transition:color 1s;

    -webkit-transition:color 1s;

    -o-transition:color 1s;

}

p#back-to-top a:hover{

    color:#979797;

}

p#back-to-top a span{

    background-image:url(top1.png);

    border-radius:6px;

    display:block;

    height:64px;

    width:56px;

    margin-bottom:5px;

    /*使用CSS3中的transition属性给<span>标签背景颜色加入渐变效果*/

    -moz-transition:background 1s;

    -webkit-transition:background 1s;

    -o-transition:background 1s;

}

#back-to-top a:hover span{

    background-image:url(top1.png);

}

</style>

<script>

$(document).ready(function(e) {

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

        $(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:0},1000);

                return false;

            });

        });  

});

</script>

</head>

<body>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>aaa<br>bb<br>

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

</body>

</html>

jquery实现返回基部案例效果的更多相关文章

  1. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  2. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  3. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

  4. jquery实现"跳到底部"，"回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. javascript+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...

  6. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

  7. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  9. jQuery文本段落展开和折叠效果

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

随机推荐

  1. Educational Codeforces Round 10

    A:Gabriel and Caterpillar 题意:蜗牛爬树问题:值得一提的是在第n天如果恰好在天黑时爬到END,则恰好整除,不用再+1: day = (End - Begin - day0)/ ...

  2. log4j日志

    1.引入的包 2.配置文件 该文件放到src路径下, log4j.rootLogger=DEBUG,CONSOLE,A1,im #DEBUG,CONSOLE,FILE,ROLLING_FILE,MAI ...

  3. struts2 学习记录 过滤器 国际化

    struts2接触不是一天两天了,但是一直没有用它做什么项目,但老师确一直说它有很大的学习价值,所以还是把我学习到的东西给记录一下,记录的东西没有规律,只是给自己留个备份, struts2中最关键的是 ...

  4. Xml序列化UTF-8格式错误

    我需要得到一个类的Xml序列化后的字符串 using (System.IO.MemoryStream mem = new System.IO.MemoryStream()) { XmlTextWrit ...

  5. 使用wxPython WebView浏览器版本问题

    使用CodeMirror和wxPyhton的WebView创建嵌入客户端的本地代码编辑工具. 版本为wxPython 3.0,CodeMirror 支持的浏览器IE8或以上. wxPython提供了H ...

  6. mfc/格式转换

    1.int型转为字符串型 int s = 123; CString str; str.Format("%d",s);

  7. iOS 用代码+Xib搭建UI界面实例

    1.背景 有些我们不能只用代码去构建界面,代码是万能的,你用其他方式可以实现的界面,用代码也一定能 实现,但是我们没必要这样做,有的时候用xib会是更好的选择,代码和xib的优劣地方我们得知道,为了 ...

  8. MySql连接JDBC数据库------借鉴的红客联盟的

    首先安装MySQL数据库,我安装的是MySQL5.5,具体安装步骤这里就不介绍了.需要提醒的是,如果安装进程一直停在start service那里,无法继续进行下去的话,请参照我的博文<安装My ...

  9. Windows下Qt5搭建Android开发环境笔记

    Windows很大的特点是配置使用几乎都可以图形化进行,和Linux比起来在很多时候配置环境也要方便很多.所以,搭建Qt for Andorid也是十分简单的.需要以下工具: 1.最方便的Qt官方包, ...

  10. Linux挂载磁盘

    查看 fdisk –l 挂载 mount 磁盘 目录 参考地址:http://blog.csdn.net/tianlesoftware/article/details/5642883 卸载 umoun ...