<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. 【物联网】国内几大云计算厂商的物联网IOT解决方案-阿里云、腾讯、百度、华为、青云（转）

    一.前言随着万物互联时代的来临,IOT逐渐成为各大云计算厂商重点发力的方向,作为平台厂商,提供的是包含接入.存储.管理.计算.展示等多个方面的综合能力,我这里就根据它们各自的特点和能力,简单介绍下它们 ...

  2. Qt编写自定义控件2-进度条标尺

    前言 进度条标尺控件的应用场景一般是需要手动拉动进度,上面有标尺可以看到当前进度,类似于qslider控件,其实就是qslider+qprogressbar的杂交版本,不过我才用的是纯qpainter ...

  3. 使用ionic2开发一个二维码扫描功能

    界面添加一个按钮: <button ion-button block color="secondary" class="Scan-button" (cli ...

  4. adb 常用命名

    adb是Android Debug Bridge的简称, 就是起到调试桥的作用,用来操作android设备 adb help (显示帮助信息) adb devices (获取设备列表及设备状态) ad ...

  5. oracle数据库字符集查询

    1>数据库服务器字符集 select * from nls_database_parameters,其来源于props$,是表示数据库的字符集. 查询结果如下 NLS_LANGUAGE AMER ...

  6. 五子棋棋盘布局 table和ul哪个好

    想要在页面布局以上棋盘,可以用ul li 布局,但却有明显的缺点: 1.两行两列:ul li 下面如果再放li 会出错,只能是放其他的,比如div. 或者放li *行*列: 但是这样有两个明显缺陷: ...

  7. JDK线程池的拒绝策略

    关于新疆服务请求未带入来话原因的问题 经核查,该问题是由于立单接口内部没有成功调用接续的 “更新来电原因接口”导致的,接续测更新来电原因接口编码:NGCCT_UPDATESRFLAG_PUT ,立单接 ...

  8. tomcat8.5.11安装教程

    备份,省得以后自己又忘了. 1.下载tomcat 2.环境变量设置 打开环境变量设置 注意,要点击下面红框处的新建按钮,而不要点击上面的.新建系统变量: 注意,变量名一定得设置为CATALINA_HO ...

  9. 找不到main

    用eclipse写代码的时候,写了一个简单的程序,编译的时候突然出现“错误: 在类 com.test.demo 中找不到 main 方法, 请将 main 方法定义为: public static v ...

  10. 如何将本地大文件通过终端上传到linux服务器

    第一种方式:  SecureCRT下   上传文件只需在shell终端仿真器中输入命令“rz”,即可从弹出的对话框中选择本地磁盘上的文件,利用Zmodem上传到服务器当前路径下.   下载文件只需在s ...