jQuery下的返回顶部功能的实现实例页面
发布时间:2016-09-04 编辑:jiaochengji.com
教程集为您提供jQuery下的返回顶部功能的实现实例页面等资源,欢迎您收藏本站,我们将为您提供最新的jQuery下的返回顶部功能的实现实例页面资源
jquery下的返回顶部功能的实现实例页面
直接复制下面代码到页面即可,其他什么都不用做。当然,系统中已使用jquery了。
CSS代码:
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity=60); }
JS代码:
(function() { var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })();
您可能感兴趣的文章:
jQuery下的返回顶部功能的实现实例页面
网页中返回顶部代码(多种方法)另附注释说明
隐藏与显示回到顶部按钮的js代码
返回顶端的js代码(纯文字版)
仿新浪微博返回顶部的jquery实现代码
页面回到顶部的三种实现方法(锚标记,js)
js+JQuery返回顶部功能如何实现
Js 网页回到顶部功能实现代码
jquery与css实现返回顶部的效果代码
CSS3 Animations创建返回顶部的平滑动画
[关闭]