您的位置:首页 > Web前端 > JQuery

jquery 实现简单返回顶部代码

2013-09-30 11:40 711 查看
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);

}

jQuery代码

(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(); }); })();:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: