<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. 用scrapy框架爬取映客直播用户头像

    1. 创建项目 scrapy startproject yingke cd yingke 2. 创建爬虫  scrapy genspider live 3. 分析http://www.inke.cn/ ...

  2. ThinkPHP3.2.3框架下where的组合查询and、or方法

    在项目开发中,查询数据时经常用到where条件查询来过滤数据: 有时就需要一个input输入框判断多个字段查询,这时候我们就需要使用组合查询方法来实现: 说明:组合查询的主体还是采用数组方式查询,只是 ...

  3. 使用Bitsadmin 命令下载文件

    如果你碰到一个 Sa权限的注入点,你可以执行dos命令,但是你发现站库分离,数据库和web不在一个服务器上,而且悲剧的是数据库服务器又是个内网,这个时候你该怎么办? 这里就需要用到Bitsadmin来 ...

  4. 《JAVA编程思想》第四版 PDF

    感谢,参考:https://www.cnblogs.com/buwuliao/p/8073211.html 一.链接: 中文版: https://pan.baidu.com/s/1d07Kp4 密码: ...

  5. Java开发岗位面试题归类

    一.Java基础 1. String类为什么是final的. ( 1.由于String类不能被继承,所以就不会被修改,这就避免了因为继承引起的安全隐患: 2.String类在程序中出现的频率比较高,如 ...

  6. Oracle课程档案，第四天

    “子查询”就是查询中嵌套着另一个查询,也即通过SELECT语句的嵌套使用形成子查询.当我们不知道特定的查询条件时,可以用子查询来为父查询提供查询条件以获得查询结果. 子查询先清除子查询 在清除主查询 ...

  7. 【ArcGIS for Server】制作并发布GP服务--缓冲分析为例

    https://www.cnblogs.com/d2ee/p/3641279.html https://www.jianshu.com/p/5331fa708fe5 https://www.cnblo ...

  8. 在Mac上 python中使用tesseract OCR (Pytesser) 识别图片中的文字

    仓库地址:https://github.com/RobinDavid/Pytesser brew install tesseract sudo pip install opencv-python 安装 ...

  9. ZBX_NOTSUPPORTED: Cannot obtain filesystem information: [13] Permission denied

    zabbix有默认两条自动发现规则,其中一条是自动发现已挂载文件系统,但笔者的三个挂载文件系统中两个监控成功了,一个失败 agentd端挂载情况: 仔细研究sdb1的挂载点,发现它是挂载在xiami用 ...

  10. 合作开发工具——freeze和pipreqs

    以后在合作开发的过程中,难免会用到别人开发到一半或者将自己开发的项目交给别人,在转交项目的时候需要让别人知道本项目中用到了哪些模块,这时可以用到一条命令来帮助我们. pip3 freeze # 获取环 ...