基本信息
源码名称:Jquery 返回顶部 例子下载,当页面滚动时 自动显示返回顶部
源码大小:4.73KB
文件格式:.zip
开发语言:js
更新时间:2013-06-27
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
返回顶部的图片也已经包含在压缩文件中了,方便大家拿来就能用
<html> <head> <title>测试返回到顶部</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script>window.jQuery || document.write(unescape('%3Cscript src="http://jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script> <style type="text/css"> .backToTopnei{ display: none; width:23px; height:78px; background: url(http://www.youxituan.com/images/topzi625.png); position: fixed; _position: absolute; right:60px; bottom:110px; _bottom: "auto"; cursor: pointer; } a.backToTopnei:hover{ background: url(http://www.youxituan.com/images/topzi625.png); background-position:-23px 0px;} </style> </head> <body> <div> <h1>测试返回到顶部</h1> <div style="height:100px;">段落1</div> <div style="height:100px;">段落2</div> <div style="height:100px;">段落3</div> <div style="height:100px;">段落4</div> <div style="height:100px;">段落5</div> <div style="height:100px;">段落6</div> <div style="height:100px;">段落7</div> <div style="height:100px;">段落8</div> <div style="height:100px;">段落9</div> <div style="height:100px;">段落10</div> </div> <script type="text/javascript"> (function () { var $backToTopneiTxt = "", $backToTopneiEle = $('<a class="backToTopnei"></a>').appendTo($("body")) .text($backToTopneiTxt).attr("title", $backToTopneiTxt).click(function () { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopneiFun = function () { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0) ? $backToTopneiEle.show() : $backToTopneiEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopneiEle.css("top", st winh - 166); } }; $(window).bind("scroll", $backToTopneiFun); $(function () { $backToTopneiFun(); }); })(); </script> <div><a href="#" class="backToTopnei">返回顶部</a></div> </body> </html>