<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type = "text/css">

        div{ position:relative;}

        div #sp{ position:absolute; bottom:; right:;}

        #sp{ position:fixed; top:%; left:82.5%; cursor:pointer;}

    </style>

    <script type = "text/javascript" src = "JueryPractice/jquery-1.7.2.min.js"></script>

    <script type ="text/javascript">

        $(document).ready(function () {

            $("#sp").hide();

            $(function () {

                $(window).scroll(function () { //移动浏览器的滚动条时触发

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

                        $("#sp").fadeIn();

                    }

                    else {

                        $("#sp").fadeOut();

                    }

                });

            });

            $("#sp img").click(function () {

                $("body,html").animate({ scrollTop:  }, , false);

            });

            //匹配id为sp选择器紧邻的第一个选择器

            $("#sp + p").click(function () {

                $("#sp + p").animate({ "height":  }); //改变元素的高度

            });

            $("#chui").click(function () {

                alert($(window).scrollTop()); //获取滚动条距离浏览器顶端的垂直高度

            });

            $("#shui").click(function () {

                alert($(window).scrollLeft());

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <p id = "sp"><span></span><img src = "images/2011082113443606.gif.jpg" alt = "无法显示" /></p>

    <p style = " position:absolute; top:2000px; cursor:pointer; background-color:Green">顶部</p>

    </div>

    </form>

</body>

</html>

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

  1. JQuery 回到顶部效果

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

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

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

  3. JS实现回到顶部效果

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

  4. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  5. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery回到顶部

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

  7. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  8. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  9. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

随机推荐

  1. mysql 游标 demo

    一.MySQL游标的概念 1.游标介绍 MySQL的游标(cursor)是一个重要的概念,通过查找资料与自己的理解,主要得出以下几点关于自己的理解. 有数据缓冲的思想:游标的设计是一种数据缓冲区的思想 ...

  2. SQL查询无限层级结构的所有下级，所有上级

    无限层级结构的table1表,Id(主键),ParentId(父级id)查询某个Id的所有下级或所有上级,使用WITH AS,UNION ALL 查询 1.查询Id为1所有的下级 WITH T AS( ...

  3. 终端命令行编译运行C#程序HelloWorld

    终端命令行编译运行C#程序HelloWorld 今天忽然有人问我,刚学习java程序的时候,一般老师都会建议我们从配置环境变量开始从命令行编译运行程序,那么学习c#的时候基本是直接安装visual s ...

  4. python接口自动化测试（七）unittest 生成测试报告

    用例的管理问题解决了后,接下来要考虑的就是报告我问题了,这里生成测试报告主要用到 HTMLTestRunner.py 这个模块,下面简单介绍一下如何使用: 一.下载HTMLTestRunner下载: ...

  5. GitLab使用公钥SSH key登录

    SSH key提供了一种与GitLab通信的方式,能够不输密码就进行版本控制 第一步,检查SSH key是否存在 如果存在则把SSH Key放到GitLab上,如果不存在则生成新的SSH Key,再放 ...

  6. Python学习之旅（七）

    Python基础知识(6):基本数据类型之列表 在Python中,最基本的数据结构是序列.序列中的每个元素被分配一个序号——即元素的位置,也称为索引.第一个索引从0开始,如果要从右边开始,序列中的最后 ...

  7. java 查看线程死锁

    那我们怎么确定一定是死锁呢?有两种方法. 1>使用JDK给我们的的工具JConsole,可以通过打开cmd然后输入jconsole打开. 1)连接到需要查看的进程.

  8. IFrame标签的两个用法介绍

    1. 作为弹出层铺底覆盖 大家如果做过那种黑色遮罩盖住整张页面,而碰巧用户用的是IE6,更碰巧的是页面上有select元素,那就有得头疼了(原理就不在这里赘述了).我们会发现弹出的DIV没法遮住sel ...

  9. stm8 同时使用dac和adc 采集异常，电平异常

    这种现象在早期的 使用stm8l151的dac 和adc相互干扰很厉害.后来通过读手册发现  相邻三个引脚一般不建议同时使用dac和adc.也就是这两种功能,引脚分配至少隔离三个引脚.内部为了节省成本 ...

  10. [摘录] 图灵机与lambda演算的关系

    在阅读函数式编程相关资料时,看到如下一段话.感觉说的很好,可以帮助我这种学渣一点点的建立起整个知识体系. 以下片段,摘抄自豆瓣网友 赛义甫 的豆列 “逻辑与计算” 中的一段介绍. 莱布尼兹曾经有两个梦 ...