<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:0; right:0;} #sp{ position:fixed; top:70%; 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() > 100) { $("#sp").fadeIn(1000); } else { $("#sp").fadeOut(1000); } }); }); $("#sp img").click(function () { $("body,html").animate({ scrollTop: 0 }, 1500, false); }); //匹配id为sp选择器紧邻的第一个选择器 $("#sp + p").click(function () { $("#sp + p").animate({ "height": 300 }); //改变元素的高度 }); $("#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>