首页 > 代码库 > Jquery回到顶部效果
Jquery回到顶部效果
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type = "text/css"> #sp{ position:fixed; top:70%; left:82.5%; cursor:pointer;} </style> <script type = "text/javascript" src = http://www.mamicode.com/"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 = http://www.mamicode.com/"images/2011082113443606.gif.jpg" alt = "无法显示" /></p> <p style = " position:absolute; top:2000px; cursor:pointer; background-color:Green">顶部</p> </div> </form></body></html>
Jquery回到顶部效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。