“返回顶部”实现一例

网页中，返回顶部很普遍。现有一例子，主要靠图片 + Jquery + CSS来完成：

效果有以下几个方面：

1、页面在顶部或滚动到顶部时，“返回顶部”图片隐藏

2、当页面向下滚动时，“返回顶部”图片显现

3、鼠标未在“返回顶部”图片上面时，图片是灰的

4、鼠标移到“返回顶部”图片上面时，图片置亮（红色）

 

方法和代码如下：

1、有图片（/img/back_top.png）：

2、JS代码

/*返回顶部*/
var right = ($(window).width() - 1070) / 2 + "px";
var $backToTopTxt = "返回顶部"
, $backToTopEle = $('<div id="divBackTop"></div>').appendTo($("body")).css("right", right).attr("title", $backToTopTxt).click(function () { $("html, body").animate({ scrollTop: 0 }, 120); })
, $backToTopFun = function () {
    var st = $(document).scrollTop(), winh = $(window).height();
    (st > 0) ? $backToTopEle.fadeIn(2000) : $backToTopEle.fadeOut(2000);
    //IE6下的定位
    if (!window.XMLHttpRequest) {
        $backToTopEle.css("top", st + winh - 166);
    }
};
$backToTopEle.mouseover(function () { $backToTopEle.removeClass(); $backToTopEle.addClass("gtop2"); });
$backToTopEle.mouseout(function () { $backToTopEle.removeClass(); $backToTopEle.addClass("gtop"); });
$(window).bind("scroll", $backToTopFun);
$(function () {
    $backToTopFun();
});

3、CSS

#divBackTop {
    display: none;
    width: 45px;
    height:45px;
    background:url(/img/back_top.png) no-repeat left center;
    position: fixed;
    _position: absolute;
    right: 10px;
    bottom: 100px;
    _bottom: "auto";
    cursor: pointer;
}
.gtop{background:url(/img/back_top.png) no-repeat left center!important;}
.gtop2{background:url(/img/back_top.png) no-repeat right center!important;}