<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命令学习

    上面两篇博客讲了MySQL的安装.登录,密码重置,为接下来的MySQL命令学习做好了准备,现在开启MySQL命令学习之旅吧. 首先打开CMD,输入命令:mysql -u root -p  登录MySQ ...

  2. 域渗透分析神器BloodHound

    一.安装过程: 1.首先安装JDK,要求是JDK8 JDK8下载地址 windows下按照提示自动安装好久可以了 2.安装neo4j neo4j图数据库下载地址 下载好后,进入对应的目录在命令行运行如 ...

  3. CSS设置浏览器滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...

  4. mysql之表格的关联关系

    1.’基本模式有多对一,多对多,一对一.关联的两个基本组建为外键列和参照列 典型的多对一模式,很普遍,如部门表和员工表,即一个部门可以有多个员工. 对于多对多的模式,就需要建立中间表,将其转换为多对一 ...

  5. 10.17小结：table.copy() 和 distinct 查询

    1. 当datatable 已存在于一个dataset中时,可以使用 ds.tables.add(dt.copy()) 来向dataset 中添加datatable; 2. 当datarow已存在于一 ...

  6. mysql 查询排名 返回值拼接的骚操作

    故事背景: 依照原系统的框子搞一个新的系统给其他人使用,因为新的系统配置库依然需要使用原有的表,表中有字段区分新的系统,然后就有了这个很没劲的数据同步. 难点:配置库码表数据的主键之前是自增,后来改造 ...

  7. 【zc】 php计算两个日期相隔多少年,多少月,多少日的函数

    /* *function:计算两个日期相隔多少年,多少月,多少天 *数据接受格式: '2014-12-03','2000-12-01'; *param string $date1[格式如:2011-1 ...

  8. juqery 点击分页显示，指定一页显示多少个，首次加载显示多少个

    源代码html: //源代码:html <div class="jq22"> <div class="hidden"> <li&g ...

  9. js中级小知识5

    元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1 ...

  10. exe电子书制作教程(超详细)【申明：来源于网络】

    exe电子书制作教程(超详细)[申明:来源于网络] 地址:http://wenku.baidu.com/view/0b046907eff9aef8941e0631.html