<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. maven项目中使用redis集群报错： java.lang.NumberFormatException: For input string: "7001@17001"

    解决:由于redis集群的采用的版本是2.7的,在maven的pom.xml中将jedis的版本改成2.9的就可以了

  2. .NET开发人员遇到Maven

    由.NET转向Java开发,总是会带着.NET平台的一些概念和工具想着在对应的Java平台是否也有着相同的解决方案.第一次用Maven随手打开pom.xml,看着里面许多属性描述我的感觉就是这是一个M ...

  3. 【CF666C】Codeword 结论题+暴力

    [CF666C]Codeword 题意:一开始有一个字符串s,有m个事件,每个事件形如: 1.用一个新的字符串t来替换s2.给出n,问有多少个长度为n的小写字母组成的字符串满足包含s作为其一个子序列? ...

  4. 读《javascript语法精粹》知识点总结

    昨天泡了大半天的读书馆,一口气看完了<javascript语法精粹>这本书,总体来说这本书还是写的不错,难怪那么多的推荐.<javascript语法精粹>主要是归纳与总结了ja ...

  5. Synctoy2.1使用定时任务0X1

    环境描述:公司需要在windows上面使用双向文件同步,目前发现SyncToy可以实现这个功能,但是在Windows 2012上面 ,添加定时任务的时候,执行状态总是0x1,定时任务配置确认多次,肯定 ...

  6. C#遍历枚举（Enum）值

    foreach (object o in Enum.GetValues(typeof(EmpType))) { Console.WriteLine("{0}:{1}", o, En ...

  7. 算法基础_递归_求杨辉三角第m行第n个数字

    问题描述: 算法基础_递归_求杨辉三角第m行第n个数字(m,n都从0开始) 解题源代码(这里打印出的是杨辉三角某一层的所有数字,没用大数,所以有上限,这里只写基本逻辑,要符合题意的话,把循环去掉就好) ...

  8. ZOJ 4060 - Flippy Sequence - [思维题][2018 ACM-ICPC Asia Qingdao Regional Problem C]

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4060 题意: 给出两个 $0,1$ 字符串 $S,T$,现在你有 ...

  9. Gym 101873C - Joyride - [最短路变形][优先队列优化Dijkstra]

    题目链接:http://codeforces.com/gym/101873/problem/C 题意: 这是七月的又一个阳光灿烂的日子,你决定和你的小女儿一起度过快乐的一天.因为她真的很喜欢隔壁镇上的 ...

  10. pytorch--nn.Sequential学习

    nn.SequentialA sequential container. Modules will be added to it in the order they are passed in the ...