<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. Oracle误删除数据的恢复方法（转）

    来源:原创网站北京北亚数据恢复中心,转载须注明出处. 学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失.当我在工作中真正遇到这些 ...

  2. CF 634A Island Puzzle

    A. Island Puzzle time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  3. 转：Maven <resource>标签

    maven资源文件的相关配置   构建Maven项目的时候,如果没有进行特殊的配置,Maven会按照标准的目录结构查找和处理各种类型文件. src/main/java和src/test/java  这 ...

  4. prometheus + grafana安装部署（centos6.8）

    官方网址:https://prometheus.io/ GitHub网址:https://github.com/prometheus/prometheus 软件下载地址:https://prometh ...

  5. 创建一个抽象的员工类， 抽象开发累继承员工类，JavaEE ，和安卓继承开发类在测试类中进行测试

    /* 1 定义一个员工类  所有的子类都抽取(抽象类)  Employee            属性:姓名  工号(生成get  set  )       方法:工作  抽象     2 定义一个研 ...

  6. GitHub 设置首页显示 404 There isn't a GitHub Pages site here.

    问题如题! 能使用的必要条件是: 1.创建的仓库 Code 中 必须 有 README.md 文件,内容自定 2.设置模板在仓库中 Settings -->GitHub Pages --> ...

  7. js 第二课

    =赋值 ==比较 ===绝对比较 &&且 ||  或 !取反 a?1:0 a=ture a?1:0 function LeyBc() { var a={d:11,b:22,c:&quo ...

  8. mysql8.0发布新特性

    2018年4月21日 14:36:42 https://dev.mysql.com/doc/relnotes/mysql/8.0/en/news-8-0-11.html#mysqld-8-0-11-b ...

  9. Python idle运行代码出现'ascii' codec can't encode characters in position 0-2

    编码问题,采用一种方法: Python代码 ,开头加: import sys reload(sys) sys.setdefaultencoding('utf8') 在idle中运行后没错误,但是不显示 ...

  10. Python cffi学习（二）

    上篇文章中讲到Python中调用外部c文件可以有两种方法,一是使用cffi.verify()的形式使用,但是该种方式仍然需要进行函数声明.二是将外部c文件编译成为函数库,然后通过cffi进行使用. 由 ...